/* =============================================================== */
/* Responsive Styling for general objects                          */
/* =============================================================== */

/* styles for old browsers and generic styling */

.metro .container {
	margin-top: 0px;
	margin-left: 0px;
	margin-bottom: 10px;
	margin-right: 0px;
}

.metro #main-container {
	margin: 0rem;
	padding: 0rem;
	position: absolute;
	overflow: visible;
	width: 100% !important;
}

.metro .container.tile-area {
	width: 100% !important;
}
	
.metro .tile-area.header-section {
	height: 9rem;
}

.metro .tile-area.header-section {
	padding: 10px 60px 0 60px;
}

.metro .tile-area.header-section .tile-area-title {
	left: 0px;
}

.metro #main-page-content.tile-area {
	padding: 0rem 5rem 0rem 5rem;
}
	
header {
	margin-left: 0px !important;
	margin-right: 0px !important;
}

.metro h1.tile-area-title {
	margin-bottom: 1.5rem;
	margin-top: 5rem;
	margin-left: 3rem;
}

.metro h2.last-update {
	color: #999999 !important;
	margin-bottom: 2rem;
	margin-top: -0.5rem;
	margin-left: 5rem;
	font-size: 1.3rem;
}

footer {
	height: 28px;
}

@media only screen and (max-width: 620px) { 
	.metro img.image-left-content,
	.metro img.image-right-content {
		width: 100% !important;
	}

	.metro div.content-to-left, 
	.metro div.content-to-right {
		width: 100% !important;
		float: left !important;
		clear: both !important;
	}

	.metro div.content-to-left > img.main-image, 
	.metro div.content-to-right > img.main-image {
		width: 98% !important;
		padding: 0.5% 1% 0 1% !important;
		float: left !important;
		clear: both !important;
	}
	
	.metro div.content-to-right > img.main-image {
		margin-right: 0px;
	}
	
	.metro img.image-left-content {
		padding-right: 0px;
	}
}
	
@media only screen and (max-device-width: 480px) {
	/* styles for mobile browsers smaller than 480px; (iPhone) */
	.metro h1.tile-area-title {
		margin-top: 8rem;
	}
	
	.metro .navigation-bar.light {
		background-color: rgb(236, 227, 182);
	}
	
	.metro #main-page-content.container.tile-area {
		padding: 0rem 5rem 0rem 5rem;
	}
	
	.metro .tile-area.header-section {
		height: 9rem;
	}
	
	.metro .tile-area.header-section .tile-area-title {
		left: 0rem;
	}

	.metro h1 {
		font-size: 4.5rem;
	}
	
	.metro h1 small {
		font-size: 3rem;
	}

	.metro .container.content-area {
		padding: 0rem 2rem 0rem 2rem;
	}

	.metro .main-content img.main-image {
		width: 100% !important;
		float: left !important;
		clear: both !important;
		left: 0px;
		margin-top: 10px;
		margin-left: 0px;
	}
	
	.metro .bottom-menu-wrapper .horizontal-menu.compact a {
		font-size: 1.4rem;
	}
	
	.metro .command-button {
		font-size: 2.0rem;
		line-height: 2.4rem;
	}
	
	.metro .command-button small {
		font-size: 1.6rem;
		line-height: 1.8rem;
	}
	
	.metro .pagination.small ul li a {
		padding: 2px 9px;
		font-size: 1em;
		margin-bottom: 4px;
		margin-top: 4px;
		width: 3.5em;
	}
	
	.metro #main-container #main-page-content,
	.metro #main-container #main-page-content #tile-container {
		width: 480px !important;
		margin-bottom: 3rem;
	}
}

@media only screen and (max-device-width: 384px) {
	/* Google Nexus 4 - width 768px -> device pixel ratio 2 */
	
	.metro h1.tile-area-title {
		margin-top: 8rem;
	}
	
	.metro #main-page-content.container.tile-area {
		padding: 0rem 5rem 0rem 8rem;
	}
	
	.metro #main-container #main-page-content,
	.metro #main-container #main-page-content #tile-container {
		width: 384px !important;
		margin-bottom: 3rem;
	}
}

@media only screen and (max-device-width: 320px) {
	/* iPhone specific - iPhone 4, 4S  and possibly 5*/

	.metro h1.tile-area-title {
		margin-top: 8rem;
	}

	#main-container {
		margin-top: 10px;
	}

	.metro .navigation-bar.light {
		background-color: rgb(236, 227, 182);
	}
	
	.metro #main-page-content.container.tile-area {
		padding: 0rem 5rem 0rem 5rem;
	}
	
	.metro .tile-area.header-section {
		height: 9rem;
	}
	
	.metro .tile-area.header-section .tile-area-title {
		left: 0rem;
	}
	
	.metro h1 {
		font-size: 4rem;
	}
	
	.metro h1 small {
		font-size: 2.5rem;
	}
	
	.metro .command-button {
		font-size: 1.5rem;
		line-height: 2.0rem;
		padding: 0.3rem 0.4rem;
	}
	
	.metro .command-button small {
		font-size: 1.4rem;
		line-height: 1.8rem;
	}
	
	.metro .command-button [class*="icon-"] {
		font-size: 2.5rem;
		margin-top: 0.5rem;
	}
	
	.metro .command-button [class*="icon-"].on-right + small {
		margin-right: 25px;
	}
	
	.metro #main-container,
	.metro #main-container #main-page-content,
	.metro #main-container #main-page-content #tile-container {
		width: 320px !important;
		margin-bottom: 3rem;
	}
	
	.metro .main-content img.main-image {
		width: 100% !important;
		float: left !important;
		clear: both !important;
		left: 0px;
		margin-top: 10px;
		margin-left: 0px;
	}

	.metro dl.horizontal dt {
		width: 60px;
	}
	
	.metro dl.horizontal dd {
		margin-left: 80px;
	}
}

@media only screen and (max-width: 800px) {
	
	.metro h1.tile-area-title {
		margin-top: 8rem;
	}
	
	.metro .navigation-bar.light {
		background-color: rgb(236, 227, 182);
	}
	
	.metro .navigation-bar .element-menu > li > a.dropdown-toggle:after, 
	.metro .navbar .element-menu > li > a.dropdown-toggle:after {
		margin-left: -18px;
	}
	
	.metro #main-container #main-page-content,
	.metro #main-container #main-page-content #tile-container {
		width: 800px !important;
		margin-bottom: 3rem;
	}
}

@media only screen and (device-width:768px){
	/* default iPad screens */
	/* for sumo sized (mac) screens */
	
	.metro h1.tile-area-title {
		margin-top: 8rem;
	}
	
	.metro .navigation-bar.light {
		background-color: rgb(236, 227, 182);
	}
	
	.metro .container.content-area {
		padding: 0px 20px 0 20px;
	}
	
	.metro #main-page-content.container.tile-area {
		padding: 10px 20px 0 20px;
	}
	
	.metro .tile-area.header-section {
		padding: 10px 20px 0 20px;
	}
	
	.metro .tile-area.header-section .tile-area-title {
		left: 20px;
	}
	
	.metro #main-container #main-page-content,
	.metro #main-container #main-page-content #tile-container {
		width: 720px !important;
		margin-bottom: 3rem;
	}
}

/* different techniques for iPad screening */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
	
	.metro h1.tile-area-title {
		margin-top: 8rem;
	}
	
	#main-container {
		margin-top: 0rem;
		padding: 0rem;
	}
	
	.metro #main-page-content.container.tile-area {
		padding: 2rem 15rem 0rem 15rem;
	}
	
	/* For portrait layouts only */
	.metro .navigation-bar.light {
		background-color: rgb(236, 227, 182);
	}
	
	.metro .container.content-area {
		padding: 0rem 5rem 0rem 5rem;
	}
	
	.metro .tile-area.header-section {
		padding: 2rem 5rem 0rem 5rem;
	}
	
	.metro .tile-area.header-section .tile-area-title {
		left: 0rem;
	}
}

@media only screen and (max-width: 720px) and (orientation:portrait) {
	/* styles for mobiles of the kind of Motorola Droid RazrHD
	   with max width - 720px -> Device pixel ratio = 1 */
	   
	.metro h1.tile-area-title {
		margin-top: 8rem;
	}
	   
	.metro #main-page-content.container.tile-area {
		padding: 0rem 5.5rem 0rem 5.5rem;
	}
	
	.metro #main-container #main-page-content,
	.metro #main-container #main-page-content #tile-container {
		width: 720px !important;
		margin-bottom: 3rem;
	}
}

@media only screen and (max-width: 360px) and (orientation:portrait) {
	/* Nokia C5, C6 C7, N97, N8, X7 - width 360px -> device pixel ratio 1 */
	.metro h1.tile-area-title {
		margin-top: 8rem;
	}
	
	.metro #main-page-content.container.tile-area {
		padding: 0rem 5rem 0rem 8rem;
	}
	
	.metro #main-container #main-page-content,
	.metro #main-container #main-page-content #tile-container {
		width: 360px !important;
		margin-bottom: 3rem;
	}
}

@media only screen and (max-width: 320px) and (orientation:portrait) {
	/* iPhone specific - iPhone 5*/
	body {
		line-height: 1.6rem !important;
	}
	
	.metro #main-container #main-page-content, 
	.metro #main-container #main-page-content #tile-container {
		width: 320px !important;
		margin-bottom: 3rem;
	}

	.metro .tile .tile-content.email .email-image {
		width: 3.0rem !important;
		height: 3.0rem !important;
	}
	
	.metro .tile .tile-content.email .email-data .email-data-title {
		font-size: 1.6rem !important;
	}
	
	.metro .tile .tile-content.email .email-data .email-data-subtitle {
		font-size: 1.4rem !important;
	}
	
	.metro .tile .tile-content.email .email-data .email-data-text {
		font-size: 1.2rem !important;
	}
	
	.metro .tile .tile-content.email .email-data {
		margin-left: 3.4rem !important;
	}
	
	h1.tile-area-title {
		margin-top: 6rem !important;
	}

	.metro h1.tile-area-title {
		font-size: 4.0rem !important;
	}
	
	.metro #main-page-content.container.tile-area {
		padding: 0rem 4rem 0rem 4rem !important;
	}
	
	.metro dl.horizontal dt {
		width: 60px !important;
	}
	
	.metro dl.horizontal dd {
		margin-left: 80px !important;
	}
	
	.metro .command-button [class*="icon-"] {
		font-size: 2.0rem;
		margin-top: 0.2rem;
	}
	
	.metro .input-control.text, 
	.metro .input-control.password, 
	.metro .input-control.file, 
	.metro .input-control.email, 
	.metro .input-control.tel, 
	.metro .input-control.number {
		height: 2.5rem;
	}
	
	.metro .input-control.text [class*="btn-"], 
	.metro .input-control.password [class*="btn-"], 
	.metro .input-control.file [class*="btn-"], 
	.metro .input-control.email [class*="btn-"], 
	.metro .input-control.tel [class*="btn-"], 
	.metro .input-control.number [class*="btn-"] {
		top: 0px;
	}
	
	.metro .tab-control .frame {
		padding: 5px;
	}
}

@media only screen and (max-device-width: 800px) and (orientation:portrait) {
	/* Amazon Kindle Fire HD 8.9" - width 1200px -> device pixel ratio 1.5 */
	.metro h1.tile-area-title {
		margin-top: 8rem;
	}
	
	.metro #main-page-content.container.tile-area {
		padding: 0rem 5rem 0rem 5rem;
	}
	
	.container {
		width: 800px !important;
	}
	
	.metro #main-container #main-page-content,
	.metro #main-container #main-page-content #tile-container {
		width: 800px !important;
		margin-bottom: 3rem;
	}
}

@media only screen and (max-device-width: 720px) and (orientation:portrait) {
	/* Nokia Lumia 7X0, *XX, 900, N800, N810, N900 - width 480px -> device pixel ratio 1.5 */
	.metro h1.tile-area-title {
		margin-top: 8rem;
	}
	
	.metro #main-page-content.container.tile-area {
		padding: 0rem 5rem 0rem 5rem;
	}
	
	.metro #main-container #main-page-content,
	.metro #main-container #main-page-content #tile-container {
		width: 720px !important;
		margin-bottom: 3rem;
	}
}

@media only screen and (max-device-width: 540px) and (orientation:portrait) {
	/* Samsung Galaxy Note 3 - width 1080px -> device pixel ratio 2 */
	.metro h1.tile-area-title {
		margin-top: 8rem;
	}
	
	.metro .container {
		width: 540px !important;
	}
	
	.metro #main-page-content.container.tile-area {
		padding: 0rem 15rem 0rem 15rem;
	}
	
	.metro #main-container #main-page-content,
	.metro #main-container #main-page-content #tile-container {
		width: 540px !important;
		margin-bottom: 3rem;
	}
}

@media only screen and (max-device-width: 480px) and (orientation:portrait) {
	/* Sony Experia Sola U - width 480px -> device pixel ratio 1 */
	.metro h1.tile-area-title {
		margin-top: 8rem;
	}
	
	.metro .container {
		width: 480px !important;
	}
	
	.metro #main-page-content.container.tile-area {
		padding: 0rem 12rem 0rem 12rem;
	}
	
	.metro #main-container #main-page-content,
	.metro #main-container #main-page-content #tile-container {
		width: 480px !important;
		margin-bottom: 3rem;
	}
}

@media only screen and (max-device-width: 425px) and (orientation:portrait) {
	/* LG Optimus LTE, Optimus 4XHD - width 720px -> device pixel ratio 1.7 */
	.metro h1.tile-area-title {
		margin-top: 8rem;
	}
	
	.metro .container {
		width: 425px !important;
	}
	
	.metro #main-page-content.container.tile-area {
		padding: 0rem 12rem 0rem 12rem;
	}
	
	.metro #main-container #main-page-content,
	.metro #main-container #main-page-content #tile-container {
		width: 425px !important;
		margin-bottom: 3rem;
	}
}

@media only screen and (max-device-width: 414px) and (orientation:portrait) {
	/* iPhone6 plus - width 1125px -> device pixel ratio 3 */
	.metro h1.tile-area-title {
		margin-top: 8rem;
	}
	
	.metro .container {
		width: 414px !important;
	}
	
	.metro #main-page-content.container.tile-area {
		padding: 0rem 12rem 0rem 10rem;
	}
	
	.metro #main-container #main-page-content,
	.metro #main-container #main-page-content #tile-container {
		width: 414px !important;
		margin-bottom: 3rem;
	}
}

@media only screen and (max-device-width: 400px) and (orientation:portrait) {
	/* Samsung Galaxy Note - width 800px -> device pixel ratio 2 */
	.metro h1.tile-area-title {
		margin-top: 8rem;
	}
	
	.metro .container {
		width: 400px !important;
	}
	
	.metro #main-page-content.container.tile-area {
		padding: 0rem 10rem 0rem 10rem;
	}
	
	.metro #main-container #main-page-content,
	.metro #main-container #main-page-content #tile-container {
		width: 400px !important;
		margin-bottom: 3rem;
	}
}

@media only screen and (max-device-width: 384px) and (orientation:portrait) {
	/* BlackBerry Z10 - width 768px -> device pixel ratio 2 
	   LG Optimus G - width 768px -> device pixel ratio 2 */
	.metro h1.tile-area-title {
		margin-top: 8rem;
	}
	
	.metro .container {
		width: 384px !important;
	}
	
	.metro #main-page-content.container.tile-area {
		padding: 0rem 10rem 0rem 10rem;
	}
	
	.metro #main-container #main-page-content,
	.metro #main-container #main-page-content #tile-container {
		width: 384px !important;
		margin-bottom: 3rem;
	}
}


@media only screen and (max-device-width: 375px) and (orientation:portrait) {
	/* iPhone6 - width 750px -> device pixel ratio 2 */
	
	.metro h1.tile-area-title {
		margin-top: 8rem;
	}
	
	.metro #main-page-content.container.tile-area {
		padding: 0rem 5rem 0rem 7rem;
	}
	
	.metro #main-container #main-page-content,
	.metro #main-container #main-page-content #tile-container {
		width: 375px !important;
		margin-bottom: 3rem;
	}
}

@media only screen and (max-device-width: 360px) and (orientation:portrait) {
	/* BlackBerry Z30 - width 720px -> device pixel ratio 2 
	   HTC One X, EVO LTE - width 720 -> device pixel ratio 2 
	   Samsung S5 - width 1080px -> device pixel ratio 3 */
	.metro h1.tile-area-title {
		margin-top: 8rem;
	}
	
	.metro h2 {
		font-size: 3.2rem !important;
		line-height: 3.5rem !important;
	}
	
	.metro h3 {
		font-size: 2.8rem !important;
	}
	
	.metro h5 {
		font-size: 2.0rem !important;
		padding-top: 0.4rem !important;
	}
	
	.metro .container {
		width: 360px !important;
	}

	.metro #main-page-content.container.tile-area {
		padding: 0rem 8rem 0rem 8rem;
	}
	
	.metro #main-container #main-page-content,
	.metro #main-container #main-page-content #tile-container {
		width: 360px !important;
		margin-bottom: 3rem;
	}
	
	.metro .label {
		font-size: 2.0rem !important;
	}
}	

@media only screen and (max-device-width: 320px) and (orientation:portrait) {
	/* Apple iPhone 3GS, 4, 5 - width 320px -> device pixel ratio 1
									  640px -> device pixel ratio 2 
	   HTC EVO, Touch HD, Desire HD, Desire width 480 -> device pixel ratio 1.5 */
	.metro h1.tile-area-title {
		margin-top: 8rem !important;
	}

	.metro h2 {
		font-size: 2.8rem !important;
		line-height: 3.0rem !important;
	}
	
	.metro h3 {
		font-size: 2.4rem !important;
	}
	
	.metro .container {
		width: 320px !important;
	}
	
	.metro #main-page-content.container.tile-area {
		padding: 0rem 6rem 0rem 6rem;
	}
	
	.metro #main-container #main-page-content,
	.metro #main-container #main-page-content #tile-container {
		width: 320px !important;
		margin-bottom: 3rem;
	}
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
	/* For landscape layouts only */
	
	.metro .navigation-bar.fixed-top, 
	.metro .navbar.fixed-top, 
	.metro .navigation-bar.fixed-bottom, 
	.metro .navbar.fixed-bottom {
		position: relative !important;
		z-index: 5000;
		left: 0;
	}

	#main-container {
		margin-top: 0rem;
		padding: 0rem;
	}

	.metro .navigation-bar.light {
		background-color: rgb(236, 227, 182);
	}
	
	.metro #main-container.container.tile-area #main-page-content,
	.metro #main-container.container.tile-area #main-page-content #tile-container {
		position: relative;
		height: 100%;
		width: 1520px !important;
		margin-bottom: 3rem;
	}
	
	.metro #main-container.container #main-page-content.container.content-area {
		width: 100% !important;
		padding: 0rem 4rem 0rem 4rem;
	}
	
	.metro #main-page-content.container.tile-area {
		padding: 0rem 5rem 0rem 5rem;
		width: 1520px !important;
	}
	
	.metro .tile-area.header-section {
		height: 9rem;
		padding: 2rem 5rem 0rem 5rem;
	}
	
	.metro .tile-area.header-section .tile-area-title {
		left: 0rem;
	}
	
	.metro h1 {
		font-size: 4rem;
	}
	
	.metro h1 small {
		font-size: 2.5rem;
	}
	
	.metro .container.content-area {
		padding: 2rem 5rem 0rem 5rem;
	}
	
	/*
	.metro img {
		max-width: 50%  !important;
	}
	*/
	
	.metro .content-to-right{
		padding-left: 2rem;
	}
	
	.metro .content-to-left {
		padding-right: 2rem;
	}
	
	.metro .content-to-right img,
	.metro .content-to-left img {
		max-width: 100%  !important;
	}
}

@media only screen and (max-width: 855px) and (orientation:landscape) {
	.metro #main-container {
		margin-top: 0rem;
		padding: 0rem;
		width: 100% !important;
	}
	
	.metro #main-container.container.tile-area #main-page-content,
	.metro #main-container.container.tile-area #main-page-content #tile-container {
		position: relative;
		height: 100%;
		width: 1520px !important;
		margin-bottom: 3rem;
	}
	
	.metro #main-container.container #main-page-content.container.content-area {
		width: 100% !important;
		padding: 2rem 2rem 0rem 2rem;
	}
	
	.metro h1.tile-area-title {
		margin-top: 6rem;
		margin-bottom: 0rem;
	}
}

@media only screen and (max-width: 640px) and (orientation:landscape) {
	.metro #main-container {
		margin-top: 0rem;
		padding: 0rem;
		width: 640px !important;
	}
	
	.metro #main-container.container.tile-area #main-page-content,
	.metro #main-container.container.tile-area #main-page-content #tile-container {
		position: relative;
		height: 100%;
		width: 1520px !important;
		margin-bottom: 3rem;
	}

	.metro #main-container.container #main-page-content.container.content-area {
		width: 640px !important;
		padding: 2rem 2rem 0rem 2rem;
	}
	
	.metro h1.tile-area-title {
		margin-top: 6rem;
		margin-bottom: 0rem;
	}
}

@media only screen and (max-width: 569px) and (orientation:landscape) {
	.metro #main-container.container.tile-area {
		width: 1024px !important;
	}
	
	.metro #main-container {
		margin-top: 0rem;
		padding: 0rem;
		width: 100% !important;
	}
	
	.metro #main-container.container #main-page-content.container.content-area {
		width: 100% !important;
		padding: 2rem 3rem 0rem 4rem;
	}
	
	.metro h1.tile-area-title {
		margin-top: 8rem;
		margin-bottom: 0rem;
	}
	
	.metro img {
		max-width: 100% !important;
	}
	
	.metro .content-to-left,
	.metro .content-to-right {
		width: 100%;
		padding-right: 2rem;
		padding-left: 2rem;
	}
}

@media only screen and (max-device-width: 535px) and (orientation:landscape) {
	/* Google Nexus S - width 800px -> device pixel ratio 1.5 */ 
	.metro #main-container.container.tile-area {
		width: 1024px !important;
	}
	
	.metro #main-page-content.container.tile-area {
		padding: 0rem 5rem 0rem 5rem  !important;
	}
	
	.metro #main-container.container #main-page-content.container.content-area {
		width: 100% !important;
		padding: 2rem 3rem 0rem 4rem;
	}
	
	.metro h1.tile-area-title {
		margin-top: 6rem;
		margin-bottom: 0rem;
	}
	
	.metro img {
		max-width: 100% !important;
	}
	
	.metro .content-to-left,
	.metro .content-to-right {
		width: 100%;
		padding-right: 2rem;
		padding-left: 2rem;
	}
}


@media only screen and (max-device-width: 480px) and (orientation:landscape) {
	.metro #main-container.container.tile-area {
		width: 1024px !important;
	}
	
	.metro #main-container {
		margin-top: 0rem;
		padding: 0rem;
		width: 480px !important;
	}
	
	.metro #main-container.container #main-page-content.container.content-area {
		width: 100% !important;
		padding: 2rem 3rem 0rem 4rem;
	}
	
	.metro h1.tile-area-title {
		margin-top: 8rem;
		margin-bottom: 0rem;
	}
	
	.metro img {
		max-width: 100% !important;
	}
	
	.metro .content-to-left,
	.metro .content-to-right {
		width: 100%;
		padding-right: 2rem;
		padding-left: 2rem;
	}
}

@media only screen and (max-device-width: 320px) and (orientation:landscape) {
	.metro h1.tile-area-title {
		margin-top: 9rem;
		margin-bottom: 0rem;
	}
}


@media only screen and (min-width:960px){
	/* styles for browsers larger than 960px; */

	#main-container {
		margin-top: 0rem !important;
		padding-left: 0rem !important;
	}
	
	.metro .tile-area.header-section .tile-area-title {
		left: 0rem;
	}
}

@media screen and (min-width: 1200px){
	/* styles for browsers larger than 1200px; */

	#main-container {
		margin-top: 0rem !important;
		padding: 0rem !important;
	}
	
	.container {
		min-width: 100% !important;
		width: 1040px !important;
	}
	
	.metro .container.content-area {
		padding: 0px 80px 0 80px;
	}
	
	.metro .tile-area.header-section {
		padding: 10px 80px 0 80px;
	}
	
	.metro .tile-area.header-section .tile-area-title {
		left: 0px;
	}
	
	.metro #main-page-content.container.tile-area {
		width: 1800px !important;
	}
	
	#main-page-content.container.tile-area,
	#main-page-content.container.tile-area #tile-container {
		position: relative;
		height: 100%;
		width: 1800px !important;
		margin-bottom: 3rem;
	}
}

@media only screen and (min-width: 1241px){
	/* styles for browsers larger than 1200px; */

	#main-container {
		margin-top: 0rem !important;
		padding-left: 0rem !important;
	}
}

@media only screen and (min-width:1440px){
	/* styles for browsers larger than 1440px; */
	.container {
		min-width: 100% !important;
	}
	
	.metro .container.content-area {
		padding: 0px 80px 0 80px;
	}
	
	.metro #main-container.container #main-page-content.container.content-area {
		width: 1520px !important;
		padding: 0rem 5rem 0rem 5rem;
	}
	
	.metro #main-container #main-page-content,
	.metro #main-container #main-page-content #tile-container {
		position: relative;
		height: 100%;
		width: 2000px !important;
		margin-bottom: 3rem;
	}
	
	.metro .tile-area.header-section {
		padding: 10px 80px 0 80px;
	}
	
	.metro .tile-area.header-section .tile-area-title {
		left: 80px;
	}
}

@media only screen and (min-width:2000px){
	/* for sumo sized (mac) screens */
	.metro .container.content-area {
		padding: 0px 80px 0 80px;
	}
	
	.metro .tile-area {
		padding: 40px 80px 0 80px;
	}
	
	.metro .tile-area.header-section {
		padding: 10px 80px 0 80px;
	}
	
	.metro .tile-area.header-section .tile-area-title {
		left: 80px;
	}
	
	.metro #main-container #main-page-content,
	.metro #main-container #main-page-content #tile-container {
		position: relative;
		height: 100%;
		width: 2400px !important;
		margin-bottom: 3rem;
	}
}

/* =============================================================== */
/* Styling for the social media bar                                */
/* =============================================================== */

@media only screen and (max-device-width: 480px) {
	div.social-media-holder {
		position: static;
		height: 4rem;
		margin-top: 8rem;
    	margin-bottom: -9rem;
	}
	
	div.social-media-bar {
		height: 4rem;
		line-height: 2.6rem;
	}
	
	.social-icon {
		margin-top: 0.6rem;
		margin-bottom: 0.5rem;
		padding: 0;
		padding-right: 0.8rem;
		font-size: 2.6rem;
		display: inline-block;
	}
}