style.css

@font-face {
	font-family: "Museo";
	src: url(fonts/MuseoSans_500.otf) format("opentype");

}

body {
	
	margin: 0 auto;
	background: #f9f8f3;
}

.container {
	font-family: Museo;
	

}

.info {
	position: absolute;
	width: auto;
	top:35px;
	
	left:200px;
}





.info > p {
	width: 320px;

}


.portfolio {
	position: absolute;
	left:650px;
	width: auto;
	float: right;
	
	
	

}

.portfolio > h1 {
	font-size: 40px;

}

ul {
	list-style: none;
	display: inline;

}

ul li {
	float: left;
	padding-right: 25px;

}

ul a:hover {
	opacity: 0.5;

}



.about {
	width: 300px;

}


		/* iPad [portrait + landscape] */
@media (min-width: 768px) and (max-width: 1024px) {
	
	.container{width: 100%; zoom: 2.5; padding-left: 30px;}
	.info{left:auto;}
	.portfolio{width: auto; top:600px; right: auto; left:auto;}
	.portfolio > h1 {font-size: 50px;}
	.info > p {font-size:33px;}
	.about {font-size: 33px;}
}

/* iPhone [portrait + landscape] */
@media (max-width: 480px) {
	
	.container{width: 100%; zoom: 2.5; padding-left: 30px;}
	.info{left:auto;}
	.portfolio{width: auto; top:600px; right: auto; left:auto;}
	.portfolio > h1 {font-size: 50px;}
	.info > p {font-size:33px;}
	.about {font-size: 33px;}
	
}


		/* iPad [portrait + landscape] */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
	
	.container{width: 100%; zoom: 2.5; padding-left: 30px;}
	.info{left:auto;}
	.portfolio{width: auto; top:600px; right: auto; left:auto;}
	.portfolio > h1 {font-size: 50px;}
	.info > p {font-size:33px;}
	.about {font-size: 33px;}	
	
}

/* iPhone [portrait + landscape] */
@media only screen and (max-device-width: 480px) {
	
	.container{width: 100%; zoom: 2.5; padding-left: 30px;}
	.info{left:auto;}
	.portfolio{width: auto; top:600px; right: auto; left:auto;}
	.portfolio > h1 {font-size: 50px;}
	.info > p {font-size:33px;}
	.about {font-size: 33px;}
	
}