@font-face {
	font-family: 'SurfaceMedium';
	src: url('../fonts/surface-medium-webfont.eot');
	src: url('../fonts/surface-medium-webfont.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/surface-medium-webfont.woff') format('woff'),
		 url('../fonts/surface-medium-webfont.ttf') format('truetype'),
		 url('../fonts/surface-medium-webfont.svg#SurfaceMedium') format('svg');
	font-weight: normal;
	font-style: normal;
}
h1 {
	font-family: 'SurfaceMedium';
	font-weight: normal;
}

/* ------------------------------ */
/* line chart position and dimensions */

#line-chart1 {
	border: 1px solid #9C9EA0;
	border-radius: 8px;
	box-shadow: 0 0 3px 3px #cdcdcd; -webkit-box-shadow: 0 0 3px 3px #cdcdcd; -moz-box-shadow: 0 0 3px 3px #cdcdcd; -o-box-shadow: 0 0 3px 3px #cdcdcd; -ms-box-shadow: 0 0 3px 3px #cdcdcd;
}
#line-chart1, 
#popup-open {
	width: 350px; height: 300px;
	position: absolute; top: 100px; left: 100px; 
	overflow: hidden;
}
#popup-open {
	cursor: pointer;
	display: block;
	text-decoration: none;
}
	
/* ------------------------------ */
/* large line chart position and dimensions */

#line-chart2 {
	position: absolute; top: 50px; left: 50px; 
	width: 700px; height: 600px;
	overflow: hidden;
	border: 1px solid #9C9EA0;
	border-radius: 8px;
	box-shadow: 0 0 3px 3px #cdcdcd; -webkit-box-shadow: 0 0 3px 3px #cdcdcd; -moz-box-shadow: 0 0 3px 3px #cdcdcd; -o-box-shadow: 0 0 3px 3px #cdcdcd; -ms-box-shadow: 0 0 3px 3px #cdcdcd;
}

/* ------------------------------ */
/* regular and large line chart: animate the image */

.revealmask1 { animation: reveal-image 1s ease-in forwards; -moz-animation: reveal-image 1s ease-in forwards; -webkit-animation: reveal-image 1s ease-in forwards; -o-animation: reveal-image 1s ease-in forwards; }
.revealmask2, .revealmask3 { animation: reveal-image 1s ease-in 1s forwards; -moz-animation: reveal-image 1s ease-in 1s forwards; -webkit-animation: reveal-image 1s ease-in 1s forwards; -o-animation: reveal-image 1s ease-in 1s forwards; }

@keyframes reveal-image {
	from { width: ; }
	to { width: 0; }
}
@-moz-keyframes reveal-image {
	from { width: ; }
	to { width: 0; }
}
@-webkit-keyframes reveal-image {
	from { width: ; }
	to { width: 0; }
}
@-o-keyframes reveal-image {
	from { width: ; }
	to { width: 0; }
}

/* ------------------------------ */

#popup-wrapper {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; display: none; z-index: 10;
}

#popup-close {
	position: absolute;
	display: block;
	padding: 7px 1px 9px 1px;
	font-size: 30px;
	right: 30px;
	top: 20px;
	border-radius: 30px;
	width: 37px;
	text-align: center;
	box-shadow: 1px 1px 10px #EFEFEF;
	border: 1px solid #EAEAEA;
	color: #999;
	text-decoration: none;
	cursor: pointer;
	margin: 0;
	font: 26px/23px 'SurfaceMedium';
}