/* START Reset
================================================== */
abbr,address,article,aside,audio,b,blockquote,body,body div,caption,cite,code,dd,del,details,dfn,dl,dt,em,fieldset,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;background:0 0;}article,aside,details,figure,footer,header,hgroup,nav,section,summary{display:block}embed,img,object{max-width:100%}html{overflow-y:scroll}ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:0 0}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help}table{border-collapse:collapse;border-spacing:0}th{font-weight:700;vertical-align:bottom}td{font-weight:400}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}pre{white-space:pre;white-space:pre-wrap;white-space:pre-line;word-wrap:break-word}input[type=radio]{vertical-align:text-bottom}input[type=checkbox]{vertical-align:bottom}.ie7 input[type=checkbox]{vertical-align:baseline}.ie6 input{vertical-align:text-bottom}input,select,textarea{font:99% sans-serif}table{font:100%}small{font-size:75%}strong{font-weight:700}td,td img{vertical-align:top}gist.github.com/413930 */ sub,sup{font-size:75%;line-height:0;position:relative}sup{top:-.5em}sub{bottom:-.25em}code,kbd,pre,samp{font-family:monospace,sans-serif}.clickable,button,input[type=button],input[type=file],input[type=submit],label{cursor:pointer}button,input,select,textarea{margin:0}button{width:auto;overflow:visible}.ie7 img{-ms-interpolation-mode:bicubic}.ie6 html{filter:expression(document.execCommand("BackgroundImageCache", false, true))}.clearfix:after,.clearfix:before{content:"\0020";display:block;height:0;overflow:hidden}.clearfix:after{clear:both}.clearfix{zoom:1}
/* END Reset
================================================== */


html{
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
	font-weight: 100;
    font-size: 16px;
}

header{
	background: #e79615;
	height: 200px;
}

section{
	background: url(../img/notebook.png) no-repeat; 
	background-position: center top;
    background-size: 100% 100%;
	width: 60%;
	height: 450px;
	padding-left: 3em;
}

img[src*="phone"]{
	z-index: 200;
	width:35%;
	height: auto;
	margin-top:-50px;
	float: left;
	overflow: hidden;
}

img[src*="ios"]{
	border-top: 1px solid black;
	padding-top: .7em;
	margin-top: .5em;
	padding-bottom: 5em;
}

div.paragraph {	
	margin-top: .7em;
	float: left;
	width:30%;
	line-height:1.6em;
}

footer{
	background: #eeeeee;
	height: 35px;
	width: 100%;
	position: fixed;
	bottom: 0px;	
	text-align: center;
}

footer ul li{
	font-size: 14px;
	color: black;
	display: inline;
	margin: 0 1em;
	padding: 1em 0;
}

footer ul li a{
	color: black;
	text-decoration: none;
}

footer ul li a:hover{
	color: #e79615;
	text-decoration: none;
}
/* #Media Queries
================================================== */

 @media only screen and (max-width: 789px) {
 	
	section{
		width: 80%;
	}
	img[src*="phone"]{
		width: 40%;
	}
	
}

 @media only screen and (max-width: 479px) {
 	
 	header{
	 	height: 130px;
 	}
 	section{
	 	margin: 0;
	 	padding: 0;
	 	width: 100%;
	 	height: 100%;
 	}
	 div.paragraph {	
		width:80%;
		float: none;
		margin: 0 auto;
		text-align: center;
	}
	img[src*="phone"]{
		float: none;
		width: auto;
		height: 90%;
		margin-top: 0;
		padding: 2em 0;
		text-align: center;
		margin: auto;
		display: block;
	}

}

@media screen and (min-width: 400px){
 
  html{
    font-size: 14px;
  }
  div.paragraph {	
	width:60%;
  }
}
@media screen and (min-width: 570px){
  
  html{
    font-size: 15px;
  }
  div.paragraph {	
	width:60%;
  }
}
@media screen and (min-width: 620px){
 
  html{
    font-size: 16px;
  }
  div.paragraph {	
	width:60%;
  }

}
@media screen and (min-width: 680px){
 
  html{
    font-size: 17px;
  }
  div.paragraph {	
	width:60%;
  }

}
@media screen and (min-width: 720px){
 
  html{
    font-size: 18px;
  }
  div.paragraph {	
	width:60%;
  }

}
@media screen and (min-width: 800px){
  
  html{
    font-size: 19px;
  }
  div.paragraph {	
	width:60%;
  }
  
}
@media screen and (min-width: 860px){

  html{
    font-size: 20px;
  }
  div.paragraph {	
    width:55%;
  }

}
@media screen and (min-width: 920px){

  html{
    font-size: 21px;
  }
  div.paragraph {	
	width:45%;
  }

}
@media screen and (min-width: 1000px){

  html{
    font-size: 22px;
  }
  div.paragraph {	
    width:35%;
  }

}