@import url("reset.css");

body {
	position: relative;
	width: 100%;
	height: 100%;
	cursor: default;
	font-family: "Avenir", Helvetica, Arial, sans-serif;
	font-weight: 100;
	color: #343434;
	background-color: #fff;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.wrapper { position: relative; width: 900px; height: 100%; margin: 0 auto; overflow: hidden; }

#main_header { position: relative; top: -500px; width: 100%; height: 500px; opacity: 0; text-align: center; background: url('../img/focus.jpg') center top no-repeat; background-size: 100% auto; }
#main_header .logo { margin-top: 80px; }
#main_header .title { font-size: 100px; font-weight: 100; margin-top: 60px; text-transform: uppercase; color: #ebebeb; }
#main_header .top { position: relative; top: 700px; }
#main_header .twitter img { position: absolute; top: 10px; left: 10px; width: 50px; }
#main_header .medium img { position: absolute; top: 10px; right: 10px; width: 50px; }

#main_content { margin: 60px 0; text-align: center; }
#main_content .description { display: block; width: 620px; margin: 0 auto; font-size: 25px; line-height: 35px; letter-spacing: 1.5px; margin-top: 50px; }
#main_content #circles_box { width: 720px; margin: 0 auto; overflow: hidden; }
#main_content #circles_box .circle { float: left; width: 220px; margin: 50px 10px; }

	/* Media: Tablet (750 - 959) */

	@media all and (min-width: 750px) and (max-width: 959px) {

		.wrapper { width: 750px; }
		#main_header { height: 350px; top: -350px; }
		#main_header .logo { width: 150px; margin-top: 60px; }
		#main_header .title { font-size: 70px; margin-top: 40px; }
		#main_content #circles_box { width: 510px; }
		#main_content #circles_box .circle { width: 150px; }
	}

	/* Media: Small Tablets & Smartphones (300 - 749) */

	@media all and (min-width: 300px) and (max-width: 749px) {

		.wrapper { width: 100%; }
		#main_header { height: 220px; top: -220px; background-size: 100% 100%; }
		#main_header .logo { width: 120px; margin-top: 20px; }
		#main_header .title { font-size: 40px; margin-top: 20px; }
		#main_content { margin: 20px 0; }
		#main_content .appstore { width: 200px; }
		#main_content .description { font-size: 16px; line-height: 20px; width: 80%; margin-top: 20px; }
		#main_content #circles_box { width: 80%; }
		#main_content #circles_box .circle { float: none; width: 70%; margin: 25px 0 0 0; }
	}