@charset "utf-8";
/* Responsive SAMPLE CSS Document */

/* ---------------- MEDIA QUERIES -----------------------*/
@media only screen and (max-width: 1440px) {
	#page-outer {
		width: 100%;
	}

	#page-inner {
		width: 96%;
	}

	.share-results .icons .scenario-image {
		margin-right: 10px;
	}

	.explore-alternatives ul.your-scenario li.left {
		width: 43%;
	}

	.explore-alternatives ul.your-scenario li.right {
		width: 55%;
	}

	.explore-alternatives ul.charting-display .charts .chart {
		width: 25%;
	}

	.explore-alternatives ul.charting-display li.left {
		width: 45%;
	}

	.explore-alternatives ul.charting-display li.right {
		width: 53%;
	}
}

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

	.share-results div.left-column {
		width: 55%;
	}
	.share-results div.right-column {
		width: 45%;
	}
	.share-results .icons .scenario-image {
		margin-bottom: 30px;
	}
	
	.logo-title {
    	font-size: 2em;
	}
}

@media only screen and (max-width: 1200px) {
	.explore-alternatives ul.charting-display .charts .chart {
		width: 33%;
	}

	.explore-alternatives ul.charting-display .slider-label {
		padding: 10px 10px 0 10px;
	}

	.info-panel.narrow {
		margin: 0 10em;
	}
	
	.intro-logo-title {
    	font-size: 3.5em;
    	padding: 20px 0 0;
	}
	
	.intro-logo-subtitle {
    	font-size: 1.75em;
	}
}

@media only screen and (max-width: 1100px) {
	.share-results .icons .scenario-image:nth-child(3) {
		clear: both;		
	}
	
	.logo-title {
    	font-size: 1.75em;
	}

}

@media only screen and (max-width: 984px) {
	#page-outer {
		width: 98%;
	}

	#page-inner {
		width: 94%;
	}

	.explore-alternatives ul.charting-display .metric-label {
		width: 100%;
		text-align: left;
		margin-bottom: 2%;
	}

	.explore-alternatives ul.charting-display .slider-input {
		width: 100%;
	}

	.explore-alternatives ul.charting-display .charts .chart {
		width: 45%;
	}

	.info-panel.narrow {
		margin: 0em 0em;
	}
	
	.intro-logo-title {
    	font-size: 2.75em;
    	padding: 20px 0 0;
	}
	
	.intro-logo-subtitle {
    	font-size: 1.25em;
		padding: 5px 0 0 150px;
	}
}

@media only screen and (max-width: 767px) {
	.left-column {
		width: 100%;
		min-height: auto;
	}

	.right-column {
		width: 100%;
	}
}

@media only screen and (max-width: 500px) {
	.left-column {
		width: 100%;
	}


	.right-column {
		width: 100%;
	}
}