@media only screen and (orientation: landscape) {
    
}

@media only screen and (max-width: 1020px){
	
	#project h2{
	font-size: 1.5rem;
	margin-top: 10rem;
	
	}

	#project h3{
		font-size: 1.0rem;
		margin-top: 0.5rem;
		letter-spacing: 0.1rem;
		font-weight: 200;
	}

	#projSlide img{
		width:70%;
		display: block;
		margin:0 auto;
		padding-top:1rem;

	}

	#projSlide a.lfArrow{
		left:-10%;
		top:28%;
		width:5%;
	}


	#projSlide a.rtArrow{
		right:-10%;
		top:28%;
		width:5%;
	}

    .riotGrrlMobile{
	display:none;
    }

}

@media only screen and (max-width: 990px){
	

	.skillsContent img {
    padding-top: 4rem;
	}

	#skills h2{
		text-align: center;
		font-size:6rem;
	}

	#skills h2:before{
    top: 116px;
    left: 261px;
    }

	#skills h2:after{
    top: 116px;
    left: 546px;
    }
	
	#code {
    margin-top: 3rem;
	}

	#design {
    margin-top: 3rem;
	}

	#about {
    background: #fff;
	}

	.aboutContent{
	width:100%;
	}

	#about img.portraitSm{
		display:block;
		width:189px;
	}
	#about h2{
    font-size: 6rem;
    text-align: center;
    padding-bottom: 2rem;
	}
	#about img.portraitSm {
	width: 44%;
    margin: 0 auto;
	}
	.aboutContent{
    width: 80%;
    margin: 0 auto;
	}
	#contact h2{
	font-size: 6rem;
    text-align: center;
    letter-spacing:.3rem;
	}
	#contact h4 {
    margin: 4rem 0 0 8rem;
	}
	form {
    margin: 6rem auto 0;
	}
}





@media only screen and (max-width: 920px){
	#details .colLf,
	#details .colRt {
	width:100%;
	float:none;
	}

}		

/*@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {  
	#work ul li .info {
		transform:none;
	}
}*/

/*ipad portrait media querie*/
@media only screen and (max-width: 780px){
	
	#home ul.introIcons li {
	 	width:19%;
	}
	/*#work{
	 height:1200px;
	}*/

	#work .wrapper{
  	width: 90%;
  	margin:0 auto;
	}

	#work h2{
	  font-family: Adobe Garamond Pro;
	  font-size: 6rem;
	  letter-spacing: 1rem;
	  color: #dbd8d5;
	  padding-top: 2rem;
	  padding-bottom: 2rem;
	  text-align: center;
	  display: block;
	}

	.workDsktop{
		display: none;
	}

	.workMobile{
		display: block;
	}
	

	.dwnArw a img{
	width:12%;
	}

	#work .dwnArw a img{
		width:8%;
	}

	.skillsContent img{
	padding-bottom: 3rem;
	}

	#skills h2{
		text-align: center;
		font-size:6rem;
		padding-top: 2rem;
	}

	#skills h2:before{
    /*top:  76px;
    left: 176px;*/
    display:none;
    }

	#skills h2:after{
    /*top: 76px;
    left: 460px;*/
    display:none;
    }

	#details .colRt p {
	width:100%;
	float:none;
	padding-bottom: 1rem;
	margin-right: 0;
	}
	
	#about h2{
    font-size: 6rem;
    text-align: center;
    padding-bottom: 0rem;
    padding-top: 2rem;
	}


	#about img.portraitSm {
	display:none;
	width: 44%;
    margin: 0 auto;
	}

    .aboutContent{
    width: 86%;
    margin: 0 auto;
	}
	
	.aboutContent img.type{
	padding-top: 1rem;
	}

	#contact h2{
	font-size: 6rem;
    text-align: center;
    letter-spacing:.3rem;
    padding-top: 2rem;

	}
	#contact h4 span.name{
	letter-spacing:0.52rem;
	}

	#contact h4 span.number{
	letter-spacing:1.2rem;
	}

	#contact h4 span.email{
	letter-spacing:.17rem;
	}

	nav.dsktop{
	display:none;
	}

	.navBtn{
	display:block;
	margin-top:.8rem;
	}

	#contact h4 {
    margin: 4rem 0 0 1rem;
	}

	#projSlide img{
		width:80%;
	}
	

	#projSlideApp{
		display:none;
	}
	
	#projSlideApp{
		display:none;
	}

	.riotGrrlMobile{
       color:#8a857f;
       text-align: center;
       font-family: Adobe Garamond Pro;
	}
}



@media only screen and (max-width: 730px){
	
	#home h1 {
    font-size: 1.6rem;
    font-weight: 100;
	}

	#home h3 {
    padding-bottom: 0.8rem;
    color: #eac47d;
    letter-spacing: 0.2rem;
    }

	#home ul.introIcons li {
	    margin-right: 2rem;
	}
	
	#home ul.introIcons li img {
    width: 75%;
	}
}

@media only screen and (max-width: 660px){

	h1.landing-headline{
	width:30rem;
	height: 2rem; /* MPH: gave height to take up proper space in document */
	/*outline: 1px solid red; MPH: for visibility */
	/* position: relative; added to make absolute position listen to h1 container.*/
	}
	
	.logo{
	display:none;
	}

	.logo img{
	display:none;
	}


	.logoMobile{
	float:left;
	display: block;
	margin-top: .6rem;
	}

	.logoMobile img{
	width:110%;
	top-margin:0.6rem;
	}

}

@media only screen and (max-width: 530px){
	#home ul.introIcons li {
	    margin-right: 1rem;
	}
	
	#home ul.introIcons li img {
    width: 75%;
	}	

}



/*iphone media query*/
@media only screen and (max-width: 480px){
	/*section{
		width:480px;
	}*/

	/*.wrapper{
		width:100%;
		padding:0 1rem;
	}*/
	nav.dsktop{
	display:none;
	}

	.navBtn{
	display:block;
	}

	/*.logo img{
	width:50%;
	}*/

	.dwnArw a img{
	width:16%;
	}
	
	#home {
    padding-top: 9rem;
    }

	#home h1 {
    font-size: 1.4rem;
    font-weight: 200;
    position:relative;
    left:0;
    
    }

	 h1.landing-headline{
	  width:18rem;
	  height: 2rem; /* MPH: gave height to take up proper space in document */
	  /*outline: 1px solid red; MPH: for visibility */
	  /*position: relative; added to make absolute position listen to h1 container.*/
	}

	.landing-words-wrapper {
    letter-spacing: 0.2rem;
    /* MPH: made this as wide as the H1 Parent; */
	}

	/*#dsktopScroll{
  	display:none;
	}

	#mobileScroll{
  	display:inline-block;
  	/*margin: 0 50% 0 14%;}*/
	
	
	.landing-words-wrapper b {
		white-space: wrap;
	}



	ul.introIcons {
    padding-top: 4rem;
	}
	#home ul.introIcons li {
	    margin-right: 0rem;
	    width:32%;
	}
	
	.skillsContent img{
	width: 80%;
	padding-top:8%;
	padding-bottom:10%;
	}

	#skills h2 {
	font-size: 4rem;
    text-align: center;
	}


	#skills h2:before{
    /*top: 66px;
    left: 72px;*/
    display:none;
    }

	#skills h2:after{
    /*top: 66px;
    left: 322px;*/
     display:none;
    }
	
	#code {
    width: 100%;
    padding-bottom: 0rem;
	}

	#design {
    width: 100%;
	}

	#about h2{
    font-size: 4rem;
    text-align: center;
    
	}

	#work .dwnArw a img{
	width:16%;
	}

	#work h2{
	font-size: 4rem;
	  
	}

	.workMobile ul li{
    width: 89%;
	}
	
	#details .colRt p {
	width:100%;
	float:none;
	padding-bottom: 1rem;
	margin-right: 0;
	}

	#contact {
    padding-bottom: 7rem;
	}

	#contact h2{
	font-size: 4rem;
    text-align: center;
    letter-spacing:.0rem;
    font-weight: 200;
	}
	
	#contact h4{
	margin:2rem 0 4rem 0rem;
	font-weight: 200;
	}

	#contact h4 span.name {
    font-size: 1.3rem;
    letter-spacing: 0.3rem;
    line-height: 0rem;
    font-weight: 200;
	}

	#contact h4 span.number {
    font-size: 1.4rem;
    letter-spacing: 0.87rem;
    line-height: 3.5rem;
    font-weight: 200;
	}

	#contact h4 span.email {
    font-size: 1.0rem;
    letter-spacing: 0.24rem;
    line-height: .1rem;
    font-weight: 200;
	}

	form {
	margin:2rem 0 0 0;
    width: 100%;
	}

	label {
    letter-spacing: 0.55rem;
    line-height: 2rem;
    margin-top: .8rem;
    font-weight: 200;
	}
	/*input{
		width:100%;
	}*/

	input#fname,
	input#lname,
	input#email{
		width:100%;
		font-weight: 200;
	}  
	
	/*input[type="text"], 
	input[type="email"] {
    letter-spacing: .3rem;
    width:100%;
	}*/

	#projSlide img{
		width:100%;
	}

}


@media only screen and (max-width: 475px){
	

}