/*TEMPLATE STYLES*/
.lesson_7 div {
	display: inline-block;
}

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

body {
	background: #112037;
	margin-top: 50px;
}

h1, h2 {
	font-family: 'OrbitronMedium', Arial, sans-serif;
	font-size: 32px;
	color: #e9e6c5;
	text-align: center;
	margin-bottom: 50px;
	text-transform: uppercase;
	font-weight: normal;
}

h2 {
	font-size: 14px;
	margin-bottom: 30px;
}

p {
	color: #fff;
	font-size: 16px;
}

.lesson_7 {
	color: #3F9BD5;
	text-align: center;
	font-weight: normal;
}

.range {
	font-family: 'OrbitronMedium', Arial, sans-serif;
	font-size: 24px;
	text-transform: uppercase;
	margin-bottom:50px;
}

.range:after {
	color: #fff;
	letter-spacing: 1px;
}

.instructions {
	font-family: sans-serif;
	font-size: 12px;
	color: #EAE6C8;
}



/* Media queries
---------------------------------------- */

/* The media queries included in here are only placeholder. Modify them as your content requires */

@media only screen and (min-width: 0px) and (max-width: 320px)  {
	.range:after {
		content:"Time to upgrade your device!";
		color: red;
		display: block;
	}
}


@media only screen and (min-width: 320px) {
	/* Wide mobile (320px+) styles go here */
	.range {
		color: #112037;
	}
	
	.range:after {
		content:"320px to 768px";
		display: block;
	}
	
	body {
		background: #4290a6;
	}
}

@media only screen and (min-width: 768px) { 
	/* Tablets/netbooks (768px+) styles go here */
	.range {
		color: #112037;
	}
	
	.range:after {
		content:"768px to 1024px";
		display: inline;
	}
	
	body {
		background: #ac2823;
	}
}

@media only screen and (min-width: 1024px) { 
	/* Desktops (1024px+) styles go here */
	.range {
		color: #3F9BD5;
	}
	
	.range:after {
		content:"1024px to the moon";
	}
	
	body {
		background: #112037;
	}
}