@charset "UTF-8";
/* CSS Document */

html, body { width: 100%; height: 100%;}

html{
	-webkit-text-size-adjust: none;
}

body{
	font-family:"adelle-sans",sans-serif;
	font-weight:100;
	font-size:16px;
	color:#505050;
	background:url(../images/pattern_light.jpg) repeat;
	min-width:320px;
}

ol{
  list-style-type: decimal;
  margin-left:25px;
}

/*-------- FONT STYLES ---------*/
h1{
	display:inline;
	font-size:42px;
	margin-right:15px;
	font-weight:700;
}

h2{
	display:inline;
	font-size:22px;
	font-weight:100;
}

h3{
  font-size:28px;
  font-weight:500;
  color:#222;
}

secNavTitle{
	font-size:24;
	font-weight:100;
}

a{
	text-decoration:none;
	color:#006CD8;
}

a:hover{
	text-decoration:underline;
}

strong{
	font-weight:500;
}

p{
	padding-bottom:30px;
	font-size:18px;
	font-weight:100;
  line-height: 24px;
}

/*-------- GRID ------------*/
[class*='col-'] {
  float: left;
}
.col-1-8{
  width: 12.5%;
}
.col-2-8{
  width: 25%;
}
.col-3-8{
  width: 37.5%;
}
.col-4-8 {
  width: 50%;
}
.col-5-8{
  width: 62.5%;
}
.col-8-8{
  width: 100%;
}
.col-1-2{
  width: 50%;
}
.grid{
	min-height: 100%;
	/*margin-bottom: -17px;*/
	position: relative;
}
*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#iPhoneRedesign-slider, #iPhone5-slider, #aPhoneRedesign-slider, #iPadApp-slider,
#aTabApp-slider, #bp-slider, #bt-slider, #webstudio-slider, #webapp-sketch-slider,
#webapp-sketch-slider2, #webapp-slider, #webapp-animations-slider, #studio-slider1, #studio-slider2,
#studio-build-slider, #android-maps-slider, #android-signup-slider,
#iPhone-date-slider, #iPhone-link-slider, #iPhone-filter-slider, #mPath-spec-slider,
#sonovis-slider{
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing:content-box;
  cursor:e-resize !important;
}
[class*='col-'] {
  padding-right: 30px;
}
[class*='col-']:last-of-type {
  padding-right: 0;
}

/*-------- Nav bar ---------*/
header{
	border-top:4px solid #99CC33;
	background:url(../images/header_bottom_border.png) repeat-x bottom #222;
}

#header-container{
	position:relative;
	height:75px;
	max-width:1120px;
	margin-left: auto;
	margin-right:auto;
	z-index:99;
}

#title{
	color:#FFF;
	line-height:65px;
}

nav ul{
	float:right;
}

nav li{
	display:inline-block;
	line-height:65px;
}

nav a{
	padding-left:25px;
	padding-right:25px;
	padding-top:10px;
	padding-bottom:10px;
	margin-left:10px;
	color:#FFF;
	border:1px solid #777;
	font-size:18px;
	font-weight:100;
	text-decoration:none;
}

nav a:hover{
	background-color:#99CC33;
	text-decoration:none;
}

nav .selected{
	border-color:#99CC33;
}

nav .selected:hover{
	background-color:transparent;
}

/*----Introduction--#660066---*/
#catch-phrase{
	background-color: #AF2C76;
	color: #FFF;
	height:415px;
	padding-top:80px;
}

#catch-phrase p{
	font-size:72px;
	max-width:1120px;
	margin-left: auto;
	margin-right:auto;
	font-weight:100;
}
#changing-subtext p{
	position:relative;
	max-width:1120px;
	margin-left: auto;
	margin-right:auto;
	font-size:36px;
}

/*------- Slider -----------*/
#iPhoneRedesign-slider{
  width: 88%;
  height:auto;
  padding: 34% 7% 0%;
  background: none;
  z-index:100;
}

#iPhone5-slider, #iPhone-date-slider, #iPhone-link-slider, #iPhone-filter-slider{
  width: 85%;
  height:auto;
  padding: 30% 8% 0%;
  background: none;
  z-index:100;
}

#aPhoneRedesign-slider, #android-maps-slider, #android-signup-slider{
  width: 88%;
  height:auto;
  padding: 18% 6%;
  background: none;
  z-index:100;
}

#iPadApp-slider{
  width: 83%;
  height:auto;
  padding: 7% 8%;
  background: none;
  z-index:100;
}

#aTabApp-slider{
  width: 90%;
  height:auto;
  padding: 6% 5%;
  background: none;
  z-index:100;
}

#bp-slider, #bt-slider{
  width: 91%;
  height:auto;
  padding: 4% 5%;
  background: none;
  z-index:100;
}

#webstudio-slider, #webapp-slider, #webapp-animations-slider{
  width: 92%;
  height:auto;
  padding: 3% 4%;
  background: none;
  z-index:100;
}

#webapp-sketch-slider, #webapp-sketch-slider2{
  width: 77%;
  height:auto;
  padding: 5% 12%;
  background: none;
  z-index:100;
}

#studio-signin, #mPath-specs, #mPath-overview{
  margin-top: 40px;
}

#studio-slider1, #studio-slider2, #studio-build-slider, #mPath-spec-slider{
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px;
}

#studio-signin-slider{
  max-width: 1350;
  height: 100%;
  margin-left: auto;
  margin-bottom: 180px;
}

#sonovis-slider{
  width: 95%;
  height:auto;
  padding: 2% 3%;
  background: none;
  z-index:100;
}

img {
  max-width: 100%;
}

.imgBg {
  position: absolute;
  left: 0;
  top: 0;
  max-width: 100%;
  /*z-index:500; //Interferes with swipe interaction when on top*/
}

.white{
  background-color: #FFF;
}

.iPhoneBg {
  position: relative;
  max-width: 378px;
  height: 750px;
  margin-left: auto;
  margin-bottom: 40px;
}

.iPhone5Bg {
  position: relative;
  max-width: 382px;
  height: 803px;
  margin-left: auto;
  margin-bottom: 40px;
}

.aPhoneBg {
  position: relative;
  max-width: 417px;
  height: 817px;
  margin-left: auto;
  margin-bottom: 40px;
}

.iPadBg {
  position: relative;
  max-width: 1410px;
  height: 100%;
  margin-left: auto;
  margin-bottom: 40px;
}

.aTabBg {
  position: relative;
  max-width: 1450px;
  height: 100%;
  margin-left: auto;
  margin-bottom: 40px;
}

.bpBg, .btBg {
  position: relative;
  max-width: 959px;
  height: 100%;
  margin-left: auto;
  margin-bottom: 250px;
}

.wsBg{
  position: relative;
  max-width: 959px;
  height: 100%;
  margin-left: auto;
  margin-bottom: 300px;
}

.waBg {
  position: relative;
  max-width: 1024px;
  height: 100%;
  margin-left: auto;
  margin-bottom: 180px;
}

.wasBg {
  position: relative;
  max-width: 1024px;
  height: 100%;
  margin-left: auto;
  margin-bottom: 180px;
}

.ssBg {
  position: relative;
  max-width: 1350px;
  height: 100%;
  margin-left: auto;
  margin-bottom: 180px;
}

.sonovisBg {
  position: relative;
  max-width: 936px;
  height: 100%;
  margin-left: auto;
  margin-bottom: 90px;
}

#iPhoneRedesign-slider .rsBullets {
  bottom: -25%;
}

#iPhone5-slider .rsBullets, #iPhone-date-slider .rsBullets,
#iPhone-link-slider .rsBullets, #iPhone-filter-slider .rsBullets {
  bottom: -20%;
}

#aPhoneRedesign-slider .rsBullets, #android-maps-slider .rsBullets,
#android-signup-slider .rsBullets {
  bottom: -15%;
}

#iPadApp-slider .rsBullets {
  bottom: -14%;
}

#aTabApp-slider .rsBullets {
  bottom: -13%;
}

#bp-slider .rsBullets, #bt-slider .rsBullets{
  bottom: -43%;
}

#webstudio-slider .rsBullets, #webapp-slider .rsBullets,
#webapp-animations-slider .rsBullets{
  bottom: -36%;
}

#webapp-sketch-slider .rsBullets, #webapp-sketch-slider2 .rsBullets{
  bottom: -38%;
}

#studio-signin-slider .rsBullets{
  bottom: -38%;
}

/*-------- Main sections ---------*/
#wrapper{
	min-height: 100%;
	margin-bottom: -17px;
	position: relative;
}

.main-content{
	margin: 0px auto 30px auto;
	max-width:1180px;
	overflow:auto;
	background-color:#FFF;
  	-moz-box-shadow:    0px 1px 2px 0px #999;
  	-webkit-box-shadow: 0px 1px 2px 0px #999;
  	box-shadow:         0px 1px 2px 0px #999;
}

.main-content:after {
  content: "";
  display: table;
  clear: both;
}

.center{
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.center-logo{
  width: 200px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 20px;
  padding-bottom: 30px;
}

.project-title{
  text-align: center;
  font-size: 60px;
  font-weight: 100;
  color: #666;
  padding-top: 20px;
  padding-bottom: 40px;
}

.project-overview{
  padding-top: 40px;
}

/*------ RESUME ******/
#resume-content{
	margin: 0px auto 30px;
	max-width:1120px;
	/*overflow:auto;*/
	padding:25px;
	line-height:21px;
	background-color:#FFF;
  	-moz-box-shadow:    0px 1px 2px 0px #999;
  	-webkit-box-shadow: 0px 1px 2px 0px #999;
  	box-shadow:         0px 1px 2px 0px #999;
}

#resume-content:after {
  content: "";
  display: table;
  clear: both;
}

#resume-content .section{
	padding-top:30px;
	line-height:24px;
}

.resume-header{
  display:block;
  height: 300px
  width: 100%;
  background: black no-repeat url('../images/wood-architect-table-work.jpeg') fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.title{font-size:32px;color:#272727;font-weight:300;letter-spacing:-0.025em}
.subtitle{font-size:17px;color:#272727; font-weight:100;}
.title2{font-size:17px;color:#272727; font-weight:500;}
.group{
	margin-bottom:20px;
}
.bulletedList{
	list-style-type:circle;
	list-style-position:inside;
	margin-left: 0;
	padding-left: 2em;
	text-indent: -1em;
	line-height:24px;
}

/********** About me *********/
.aboutme{
	display:block;
	height: 100%;
	width: 100%;
	background: black no-repeat url('../images/Other/michele_garden.jpg') fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.transparent{
	filter:alpha(opacity=o0);
	-moz-opacity:0;
	-khtml-opacity: 0;
	opacity: 0;
	height:400px;
}

#aboutme-content{
	position:absolute;
	top: 80%;
	right:0;
	padding:30px;
	background-color:#FFF;
}

#aboutme-content p{
	line-height:24px;
}

#aboutme-content .title{
	font-size:60px;
	line-height:65px;
}

.aboutme-miniImg{
	width:100%;
	display:none;
}

/********** 404 *********/
.notFound{
  background: url('../images/Other/nature-beach-sand-ocean.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

.notFound-content{
  text-align: center;
  padding-top: 10%;
  padding-left: 20px;
  padding-right: 20px;
  color: #333;
}

.notFound-content h3{
  padding-bottom: 15px;
  color: #333;
}

.notFound p a{
  color: #4B799E;
}

/** Other **/
#nav-content{
	max-width:1180px;
	margin: 0px auto;
	padding-top:30px;
	padding-left:30px;
	/*border-bottom:#AAA dotted 1px;*/
	overflow:auto;
	background-color:#FFF;
  	-moz-box-shadow:    0px 1px 2px 0px #999;
  	-webkit-box-shadow: 0px 1px 2px 0px #999;
  	box-shadow:         0px 1px 2px 0px #999;
}

#nav-content ul{
	padding-bottom:30px;
}

#nav-content li{
	display:block;
	line-height:30px;
	font-weight:200;
	color:#777;
	padding-right:30px;

}

#nav-content a.selected{
	color:#777;
	text-decoration:none;
}

.project-header{
  max-width:1180px;
  margin: 0px auto;
  padding-top:30px;
  padding-left:30px;
  /*border-bottom:#AAA dotted 1px;*/
  overflow:auto;
  border-top:4px solid #333;
  background-color:#FFF;
    -moz-box-shadow:    0px 1px 2px 0px #999;
    -webkit-box-shadow: 0px 1px 2px 0px #999;
    box-shadow:         0px 1px 2px 0px #999;
}

/*.project-header:after {
  content: "";
  display: table;
  clear: both;
}*/

.mPath{
    border-top: 4px solid #07CFC2;

}

.Intuit{
    border-top: 4px solid #365EBF;
}

.CMU{
    border-top: 4px solid #9C0000;
}

.workDesc{
	padding-right:20px;
	font-size:18px;
	line-height:28px;
	color:#666;
	font-weight:100;
	padding-top:10px;
}

.overview{
	padding-right:30px;
	padding-bottom:30px;
}

.phone .overview{
	padding-top:80px;
}

.helpTextPhone{
	position:relative;
	bottom: 0px;
	font-size:30px;
	font-weight:300;
	padding-bottom:20px;
	padding-top:20%;
	padding-right:20px;
}

.helpTextPhone .regular{
	font-weight:400;
}

.primaryColor{
	color: #99CC33;
}

/*
.foundicon-left-arrow:after{
	content: "  View more images! Swipe or use left/right arrows";
}*/

.helpText{
	position:relative;
	bottom: 0px;
	padding-bottom:20px;
	font-size:30px;
}

.phone, .tablet, .web{
	padding-top:40px;
	padding-left:30px;
}

.slide-controler{
	line-height:18px;
	display:inline-block;
	padding-top:20px;
	padding-bottom:20px;
}

#left-control{
	float:left;
}

#right-control{
	float:right;
	text-align:right;
}

.name{
	font-size:32px;
	font-weight:500;
	color:#222;
}

.description{
	font-size:18px;
	font-weight:200;
	padding-top:20px;
	line-height:28px;
}

.label{
	color:#777;
	font-size:16px;
	font-weight:200;
	line-height:21px;
	padding-top:15px;
}
.value{
	font-size:18px;
	font-weight:200;
	line-height:21px;
}

#footer{
	position:fixed;
	bottom:-10px;
	height:300px;
	margin-bottom:-290px;
	background-color:#222;
	z-index:9999;
}

#fTab{
	position:absolute;
	right:0px;
	top:-30px;
	width:30px;
	height:30px;
	text-align:center;
	display:inline-block;
	background-color:#222;
	color:#FFF;
}

#fContent{
	color:#FFF;
}
/*
#footer{
	width:100%;
	position:relative;
	margin-top:-17px;
	height: 17px;
	background-color:#222;
	border-bottom:2px solid rgb(153,204,51);
	color: #CCC;
	text-align:center;
	clear:both;
}*/

/*-------- Tricks ---------*/

.sticky {
  position: fixed; !important;
  top: 0;
}

.CMU-logo{
  width: 600px;
}

.img-constrain {
	max-width: 100%;
}

/*Flexible embedded videos*/
video{
	width: 100%    !important;
 	height: auto   !important;
}

.embed-container{
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow:hidden;
  max-width: 100%;
}

.embed-container iframe, .embed-container object, .embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-bottom: 40px;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */ }

.prototype-video {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap; }
  .prototype-video .proto-vid {
    margin: 20px;
    max-width: 1024px;
    /*height: auto;*/
    min-width: 280px;
    box-shadow: 0 0px 2px rgba(0, 0, 0, 0.5); }

.hidden{
	visibility:hidden;
}

.clear{
	clear:both;
}
.clearfooter {
	height: 17px;
	clear: both;
}

/*Opera Fix*/
body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;/
}

<!--[if !IE 7]>
	<style type="text/css">
		#wrap {display:table;height:100%}
	</style>
<!--[endif]-->

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 1280px or less */
@media screen and (max-width: 1280px) {
	#header-container {
		width: 100%;
	}
	.main-content {
		width: 100%;
	}
}

@media screen and (max-width: 1200px) {
	#nav-content{
		padding-left:20px;
	}
  .project-header{
    padding-left:20px;
  }
}

@media screen and (max-width: 1165px) {
	#header-container{
		padding-left:20px;
		padding-right:0px;
	}
	nav a{
		padding-left:10px;
		padding-right:10px;
		margin-left:0px;
		font-size:16px;
	}
}

/* for 870px or less */
@media screen and (max-width: 870px) {
	#header-container {
		height:164px;
		padding-left:0px;
		padding-right:0px;
	}
	#title{
		float:none;
		text-align:center;
		line-height:30px;
		padding-top:20px;
	}
	h1{
		display:inherit;
	}
	nav ul{
		float:none;
		text-align:center;
	}
	nav a{
		padding-left:25px;
		padding-right:25px;
		margin-left:5px;
		margin-right:5px;
	}
	[class*='col-'] {
	  padding-right: 15px;
	}
  .col-1-8{
    width: 50%;
  }
	.col-2-8{
		width: 100%;
	}
	.col-3-8 {
		width: 100%;
	}
  .col-4-8 {
    width: 100%;
  }
  #aPhone-redesign .col-4-8, #iPhone5 .col-4-8{
    width: 50%;
  }
  #iPhone-filter .col-4-8, #iPhone-link .col-4-8, #iPhone-date .col-4-8,
  #android-signup .col-4-8, #android-maps .col-4-8{
    width: 75%;
  }
	.col-5-8 {
		width: 100%;
	}
	#left-control{
		padding-left:15px;
	}
	#right-control{
		padding-right:15px;
	}
	.iPhoneBg {
	  height: 100%;
	  padding-bottom: 25%;
	}
	.iPhone5Bg {
	  height: 100%;
	  padding-bottom: 25%;
	}
	.aPhoneBg {
	  height: 100%;
	  padding-bottom: 20%;
	}
	.phone .overview{
		padding-top:0px;
	}
	.overview{
		padding-right:15px;
	}
	.phone, .tablet, .web{
		padding-left:15px;
	}
	#nav-content{
		padding-left:20px;
		padding-right:10px;
	}
	#nav-content ul{
		padding-top:10px;
	}
  .project-header{
    padding-left:20px;
    padding-right:10px;
  }
  .wsBg, .wasBg, .waBg {
    margin-bottom: 80px;
  }
	.helpTextPhone{
		display:none;
	}
	#fTab{
		width:15px;
		right:0;
	}
	.aboutme{
		background: none;
		height:100%;
	}
	.aboutme-miniImg{
		width:100%;
		display:inherit;
	}
	#aboutme-content{
		position:relative;
		padding:20px;
	}
	.helpTextPhone{
		font-size:24px;
	}
}

/* for high-res phones */
@media screen and (max-width: 720px) {
	#nav-content h2{
		font-size:24px;
	}
	.name{
		font-size:32px;
	}
	.description{
		font-size:18px;
		padding-top:10px;
	}
	.label{
		font-size:14px;
		line-height:18px;
	}
	.value{
		font-size:16px;
	}
  .project-title{
    font-size: 40px;
  }
	[class*='col-'] {
	  padding-right: 10px;
	}
}

/* for high-res phones */
@media screen and (max-width: 480px) {
	html{
		-webkit-text-size-adjust: none;
	}
	nav a{
		padding-left:14px;
		padding-right:14px;
		margin-left:2px;
		margin-right:2px;
	}
	.description{
		font-size:16px;
		line-height:20px;
	}
	.label{
		font-size:12px;
		line-height:16px;
		padding-right:5px;
	}
	.value{
		font-size:13px;
		line-height:15px;
	}
	#nav-content li{
		display:list-item;
		line-height:30px;
		font-weight:200;
		color:#777;
	}
	.helpTextPhone{
		font-size:21px;
	}
  .project-title{
    font-size: 32px;
  }
}

/* for high-res phones */
@media screen and (max-width: 360px) {
  #header-container {
    height:200px;
  }
}