/*body*/

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

body{
	font-size: 1em;
	font-family: "sharpsansmedium", serif;
	color: #191919;
	background: white;
}

#outline{
	height: 150%;
	width: 12px;
	position: fixed;
}

#outlineAbout{
	min-height: 100%;
	width: 100%;
	clear: both;
}

.colorBlue{
	background-color: #80dfff;
}

.colorRed{
	background-color: #FF6565;
}

.redDate{
	color: #FF6565;
	margin: -6px 0 0 0;
}

.blueDate{
	color: #80dfff;
	margin: -6px 0 0 0;
}

.greenDate{
	color: #39D244;
	margin: -6px 0 0 0;
}

.yellowDate{
	color: #FEC52E;
	margin: -6px 0 0 0;
}

.blackDate{
	color: #222222;
	margin: -6px 0 0 0;
}

.colorGreen{
	background-color: #39D244;
}

.colorYellow{
	background-color: #FEC52E;
}

.colorBlack{
	background-color: #222222;
}

#wrap{
	clear: both;
	padding: 0 0 0 0;
}






/*fonts*/

@font-face {
    font-family: sharpsansmedium;
    src: url(fonts/sharpsansmedium.otf);
}

@font-face {
    font-family: sharpsansbold;
    src: url(fonts/sharpsansbold.otf);
}

@font-face {
    font-family: sharpsansmediumitalic;
    src: url(fonts/sharpsansmediumitalic.otf);
}

@font-face {
    font-family: sharpsansbook;
    src: url(fonts/sharpsansbook.otf);
}

p{
	font-family: "sharpsansmedium"; sans-serif;
	font-weight: 100;
	font-size: .8em;
	line-height: 1.45em;
	letter-spacing: .02em;
	color: #222222;
	clear: both;
}

p.bump{
	margin: -6px 0 0 0;
}


pItalic{
	font-family: "sharpsansmediumitalic"; sans-serif;
	font-weight: 100;
	font-size: 1em;
	line-height: 1.45em;
	letter-spacing: .02em;
	color: #222222;
	clear: both;
}


h1{
	font-family: "sharpsansbold"; sans-serif;
	font-size: 1.4em;
	letter-spacing: .25em;
	line-height: 1em;
	text-align: center;
}


.colorBlue{
	color: #80DFFF;
}

.colorRed{
	color: #FF6565;
}

.colorGreen{
	color: #39D244;
}

.colorYellow{
	color: #FEC52E;
}

.colorBlack{
	color: #222222;
}

h2{
font-family: "sharpsansmedium"; sans-serif;
	font-weight: 100;
	font-size: .8em;
	line-height: 1.45em;
	letter-spacing: .04em;
}

h2.blue{
	color: #56D5FF;
	margin: -6px 0 0 10px;
}

h2.red{
	color: #FF6565;
	margin: -6px 0 0 10px;
}

h2.green{
	color: #39D244;
	margin: -6px 0 0 10px;
}

h2.yellow{
	color: #FEC52E;
	margin: -6px 0 0 10px;
}

h2.black{
	color: #222222;
	margin: -6px 0 0 10px;
}

h3{
font-family: "sharpsansmedium"; sans-serif;
	font-weight: 100;
	font-size: .8em;
	line-height: 1.45em;
	letter-spacing: .04em;
}

h3.blue{
	color: #56D5FF;
}

h3.red{
	color: #FF6565;
}

h3.green{
	color: #39D244;
}

h3.yellow{
	color: #FEC52E;
}

h3.black{
	color: #222222;
}

h4{
	font-family: "sharpsansmedium"; sans-serif;
	font-size: .7em;
	letter-spacing: .05em;
	line-height: 1.6em;
}

h5{
	font-family: "sharpsansbold"; sans-serif;
	font-size: 1.15em;
	letter-spacing: .15em;
	line-height: 1.8em;
	margin: -2px 0 0 0;
	text-align: left;
	width: 240px;
}

h12{
	font-family: "sharpsansbold"; sans-serif;
	font-size: 1.15em;
	letter-spacing: .15em;
	line-height: 1.8em;
	margin: -2px 0 0 0;
	text-align: left;
	width: 500px;
}

h11{
	font-family: "sharpsansbold"; sans-serif;
	font-size: 1.15em;
	letter-spacing: .15em;
	line-height: 1.4em;
	margin: 0 0 0 0;
	text-align: left;
}

h6{
	font-family: "sharpsansmedium"; sans-serif;
	font-weight: 100;
	font-size: .7em;
	line-height: 1.5em;
	letter-spacing: .03em;
	color: #222222;
	clear: both;
}

h10{
	font-family: "sharpsansmedium"; sans-serif;
	font-weight: 100;
	font-size: .8em;
	line-height: 1.5em;
	letter-spacing: .04em;
	color: #222222;
	clear: both;
	margin: 2px 0 0 0;
}




h14{
	font-family: "sharpsansbold"; sans-serif;
	font-size: 1.15em;
	line-height: 1.3em;
	letter-spacing: .15em;
	color: #222222;
	clear: both;
	margin: 2px 0 2px 0;
}

h13{
	font-family: "sharpsansmedium"; sans-serif;
	font-weight: 100;
	font-size: .7em;
	line-height: 1.5em;
	letter-spacing: .03em;
	color: #222222;
	clear: both;
	margin: 2px 0 0 0;
}


h7{
	font-family: "sharpsansmedium"; sans-serif;
	font-size: .01em;
	letter-spacing: .07em;
	color: #E5E5E5;
	white-space: nowrap;
}


h8{
	font-family: "sharpsansbold"; sans-serif;
	font-size: 1em;
	letter-spacing: .2em;
	line-height: 2.15em;
	padding: 10 14 12 18;
	text-align: center;

	}

h8.blue{
	color: #3c71b5;
	border: 2px solid #3c71b5;
}

h8.leftContent{
	float: center;
	text-align: center;
}

h8.red{
	color: #ea242d;
	border: 2px solid #ea242d;
}

h8.yellow{
	color: #f9ad4d;
	border: 2px solid #f9ad4d;
}




/*links*/

a{
	color: #222222;
	text-decoration: none;
}

a:hover{
	text-decoration: none;
	color: #222222;
	border-bottom: 1px solid #222222;
}

a.underline{
	color: #222222;
	border-bottom: 1px solid #222222;
}

a:hover.underline{
	text-decoration: none;
	color: #222222;
	border-bottom: none;
}

a.blue{
	color: #66DBFC;
	border-bottom: 1px solid #66DBFC;	
}

a:hover.blue{
	color: #66DBFC;
	border-bottom: none;
}

a.red{
	color: #FF6565;
	border-bottom: 1px solid #FF6565;	
}

a:hover.red{
	color: #FF6565;
	border-bottom: none;
}

a.green{
	color: #39D244;
	border-bottom: 1px solid #39D244;	
}

a:hover.green{
	color: #39D244;
	border-bottom: none;
}

a.yellow{
	color: #FEC52E;
	border-bottom: 1px solid #FEC52E;	
}

a:hover.yellow{
	color: #FEC52E;
	border-bottom: none;
}

a.black{
	color: #222222;
	border-bottom: 1px solid #222222;	
}

a:hover.black{
	color: #222222;
	border-bottom: none;
}

a.indexHover{
	color: #222222;
	border-bottom: 1px solid #222222;	
}

a:hover.indexHover{
	color: #222222;
	border-bottom: none;
}






/*header*/

#header {
	background: ;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 5000;
}

#nav {
	float: right;
	width: 160px;
	margin: 8px -114px 0 0;		
}

#navLeft {
	text-align: right;
	float: left;
	width: 160px;
	margin: 8px 0 20px 66px;		
}

#navLeftDown{
	text-align: right;
	float: right;
	position: fixed;
	width: 160px;
	bottom: 16px;	
	margin-left: 28px;	
}

#navRightDown{
	text-align: left;
	float: right;
	position: fixed;
	width: 160px;
	bottom: 16px;	
	right: -58px;	
}

.bump{
	padding: 3px 0 0 0;
}
	
.smallbump{
	margin: -10px 0 0 0;
}
	
#menuIcon{
	width: 20px;
	height: 20px;
	color: black;
	margin: 17px 0 0 30px;
	clear: both;
	position: fixed;
}	


					

ul{
	list-style: none;
	font-family:  "sharpsansmedium", sans-serif;
	font-size: .7em;
	letter-spacing: .025em;
	padding: 0 0 0 0;
}

li{
	display: inline-block;
	float: left;
	padding: 0px 28px 0 0;
	line-height: 1.6em;
}

.alignRight{
	text-align: right;
}

.alignLeft{
	text-align: left;
}


/*projectHeader*/

#projectBox{
	height: 100%;
	clear: both;
}

#projectHeader{
	position: absolute;
	top: 47%;
    margin-top: -50px;
    left: 50%;
    clear: both;
}

#projectHeaderSubtitle{
	margin: 0 auto;
	width: 300px;
	margin-left: -150px;
    left: 50%;
    height: 30px;
    text-align: center;
}

.blueHeader{
	width: 306px;
	height: 30px;
	margin-left: -153px;
	border: 4px solid #80dfff;
	padding: 13px 0 6px 0;
	color: #80dfff;
}

.redHeader{
	width: 280px;
	height: 30px;
	margin-left: -140px;
	border: 4px solid #FF6565;
	padding: 13px 0 6px 0;
	color: #FF6565;
}

.redHeaderLong{
	width: 238px;
	height: 30px;
	margin-left: -119px;
	border: 4px solid #FF6565;
	padding: 13px 0 6px 0;
	color: #FF6565;
}

.redHeaderRed{
	width: 176px;
	height: 30px;
	margin-left: -88px;
	border: 4px solid #FF6565;
	padding: 13px 0 6px 0;
	color: #FF6565;
}



.blueHeader{
	width: 306px;
	height: 30px;
	margin-left: -153px;
	border: 4px solid #80dfff;
	padding: 13px 0 6px 0;
	color: #80dfff;
}

.greenHeader{
	width: 254px;
	height: 30px;
	margin-left: -127px;
	border: 4px solid #39D244;
	padding: 13px 0 6px 0;
	color: #39D244;
}


.yellowHeader{
	width: 312px;
	height: 30px;
	margin-left: -156px;
	border: 4px solid #FEC52E;
	padding: 13px 0 6px 0;
	color: #FEC52E;
}

.blackHeader{
	width: 166px;
	height: 30px;
	margin-left: -83px;
	border: 4px solid #222222;
	padding: 13px 0 6px 0;
	color: #222222;
}

.blackHeaderSmall{
	width: 290px;
	height: 30px;
	margin-left: -145px;
	border: 4px solid #222222;
	padding: 13px 0 6px 0;
	color: #222222;
}

#projectInfo{
	position: absolute;
	margin-left: 61%;
    bottom: 20px;
    width: 350px; 
}

#emTag{
	margin: 30px 0 0 0;
	width: 30px;
	height: 4px;
}

.emBlue{
	background-color: #80DFFF;
}

.emRed{
	background-color: #FF6565;
}

.emGreen{
	background-color: #39D244;
}

.emYellow{
	background-color: #FEC52E;
}

.emBlack{
	background-color: #222222;
}

#emTagBlack{
	margin: -50px 0 0 -60px;
	width: 30px;
	height: 4px;
}

/*projectContentFrame*/

.fake-browser-ui {
	padding: 24px 0 0 0;
	border-radius: 3px;
	border-bottom: 3px solid #E5E5E5;
	background: #E5E5E5;
	display: inline-block;
	position: relative;
	line-height: 0;
	box-shadow: 1px 1px 8px #E5E5E5;
	width: 100%;
}

.fake-browser-ui .frame {
	display: block;
	height: 15px;
	position: absolute;
	top: 5px;
	left: 1px;	
	width: 100%;
}
 
.fake-browser-ui spanRed {
	height: 6px;
	width: 6px;
	border-radius: 6px;
	background-color: #F27475;
	border: 1px solid #e04353;
	float: left;
	margin: 3px 1px 0 8px;
}

.fake-browser-ui spanYellow {
	height: 6px;
	width: 6px;
	border-radius: 6px;
	background-color: #FCBA3E;
	border: 1px solid #E7A23A;
	float: left;
	margin: 3px 1px 0 4px;
}

.fake-browser-ui spanGreen {
	height: 6px;
	width: 6px;
	border-radius: 6px;
	background-color: #4EB64A;
	border: 1px solid #2DA737;
	float: left;
	margin: 3px 1px 0 4px;

}

.fake-browser-ui .whiteBox{
	background-color: white;
	margin: 0 14px 0 54px;
	padding: 6px 0 4px 4px;
	overflow: hidden;
}

.fake-browser-ui .whiteBoxMobile{
	background-color: white;
	margin: 0 14px 0 12px;
	padding: 6px 0 4px 4px;
	overflow: hidden;
}


/*projectContent*/

#projectContent{
	max-width: 1200px;
	background-color: #FFF;
	margin: 0 auto;
	padding: 40px 140px 0 150px;
	clear: both;
}



#leftContent{
	width: 32%;
	float: left;
	clear: both;
	box-sizing: border-box;
	padding: 0 12px 24px 0;
	background-color: white;
}

#rightContent{
	width: 68%;
	float: left;
	box-sizing: border-box;
	padding: 0 0 24px 12px;
}

#rightContentEnd{
	width: 68%;
	float: left;
	box-sizing: border-box;
	padding: 0 0 124px 12px;
}






#leftContentSeventy{
	width: 66.66%;
	float: left;
	clear: both;
	box-sizing: border-box;
	padding: 0 9px 24px 0;
	background-color: white;
}

#leftContentSeventyFull{
	width: 66.66%;
	float: left;
	clear: both;
	box-sizing: border-box;
	padding: 0 0 24px 0;
	background-color: white;
}


#rightContentThirty{
	width: 33.33%;
	float: left;
	box-sizing: border-box;
	padding: 0 0 24px 17px;
}






#leftContentThirtyThree{
	width: 33.33%;
	float: left;
	box-sizing: border-box;
	padding: 0 17px 24px 0;
	background-color: white;
}

#centerContentThirtyThree{
	width: 33.33%;
	float: left;
	box-sizing: border-box;
	padding: 0 9px 24px 8px;
	background-color: white;
}

#rightContentThirtyThree{
	width: 33.33%;
	float: left;
	box-sizing: border-box;
	padding: 0 0 24px 17px;
	background-color: white;
}







#leftContentTwentyFive{
	width: 25%;
	float: left;
	box-sizing: border-box;
	padding: 0 19px 24px 0;
	background-color: white;
}

#middleLeftContentTwentyFive{
	width: 25%;
	float: left;
	box-sizing: border-box;
	padding: 0 13px 24px 6px;
	background-color: white;
}


#middleRightContentTwentyFive{
	width: 25%;
	float: left;
	box-sizing: border-box;
	padding: 0 6px 24px 13px;
	background-color: white;
}



#rightContentTwentyFive{
	width: 25%;
	float: left;
	box-sizing: border-box;
	padding: 0 0 24px 19px;
	background-color: white;
}






#rightContentSeventy{
	width: 68%;
	float: left;
	clear: both;
	box-sizing: border-box;
	padding: 0 9px 24px 20px;
	background-color: white;
}





#leftContentFifty{
	width: 50%;
	float: left;
	clear: both;
	box-sizing: border-box;
	padding: 0 12px 24px 0;
	background-color: white;
}

#rightContentFifty{
	width: 50%;
	float: left;
	box-sizing: border-box;
	padding: 0 0 24px 12px;
}




#fullContent{
	width: 100%;
	clear: both;
	margin: 0 0 24px 0;
}


#lastContent{
	height: 120px;
	clear: both;
}



#leftArchiveFifty{
	width: 50%;
	float: left;
	clear: both;
	box-sizing: border-box;
	padding: 0 12px 0 0;
	background-color: white;
}

#rightArchiveFifty{
	width: 50%;
	float: left;
	box-sizing: border-box;
	padding: 0 0 0 12px;
}

#archiveContent{
	margin: 0 0 24px 0;
}

#archiveContentShort{
	margin: 0 0 24px 0;
}

#archiveContent img{
	margin: 0 0 24px 0;
}

#archiveContentComputer{
	margin: 0 0 24px 0;
}





.boxshadow{
	 box-shadow: 1px 1px 8px #e5e5e5;
}

.boxshadowbusiness{
	 box-shadow: 1px 1px 8px #e5e5e5;
	 margin: 20px 20px 20px 20px;
}


#subtitle{
	margin: -16px 0 0 12px;
}

img{
	max-width: 100%;
}

.blue{
	color: #80DFFF;
}

.red{
	color: #FF6565;
}

.black{
	color: #222222;
}

.stsimonScale{
	box-sizing: border-box;
	padding: 0 160px 0 160px;
}


#indexRows{
	margin: -12px 0 0 0px;
	max-width: 900px;

}

#rowOne{
	margin: 60px 40px 0 0;
	float: left;
	
}





table, td {
   border: none;
   text-align: left;
   padding: 20px 0 0 0;
   display: inline-block;
}

th {
	padding: 0 20px 32px 0;
	display: inline-block;
}

#tableBox{
	padding: 80px 0 100px 0px;
	display : block;
	
}

.fruit{
	margin: auto;
	float: center;
}

tableInfo {
   border: none;
   text-align: left;
   padding: 20px 0 0 0;
   display: inline-block;
}

#email{
	width: 168px;
	text-align: center;
	text-decoration: none;
	position: relative;
	bottom: 20px;	
}

#ProjectDetailsFooter{
	display: none;
}


#blockOne{
	display: none:
	
}

#blockTwo{
	display: none:
	
}

#blockThree{
	display: none:
	
}
}


@media only screen and (min-width: 959px) and (max-width: 1020px) {
    /* Here, Skeleton sets the rules for anything less than 960px
       and at least the size of the Ipad screen. */

/*body - small computer*/

#projectInfo{
	position: absolute;
	margin-left: 55%;
    bottom: 20px;
    width: 350px; 
}

#leftContent{
	width: 100%;
	float: left;
	margin: 0 auto;
	clear: both;
	box-sizing: border-box;
	padding: 0 0 20px 0;
	background-color: white;
}

#rightContent{
	width: 100%;
	float: left;
	box-sizing: border-box;
	padding: 0 0 20px 0;
}

#rightContentEnd{
	width: 100%;
	float: left;
	box-sizing: border-box;
	padding: 0 0 124px 12px;
}


#leftContent h8{
	margin: 0 auto;
	text-align: center;
}







}

@media only screen and (min-width: 767px) and (max-width: 959px) {
    /* Here, Skeleton sets the rules for anything less than 960px
       and at least the size of the Ipad screen. */

/*body - tablet*/



#leftContentFifty{
	width: 100%;
	float: left;
	clear: both;
	box-sizing: border-box;
	padding: 0 0 24px 0;
	background-color: white;
}

#rightContentFifty{
	width: 100%;
	float: left;
	box-sizing: border-box;
	padding: 0 0 24px 0;
}

#leftContentTwentyFive{
	width: 50%;
	float: left;
	box-sizing: border-box;
	padding: 0 12px 24px 0;
	clear: both;
}

#middleLeftContentTwentyFive{
	width: 50%;
	float: left;
	box-sizing: border-box;
	padding: 0 0 24px 12px;
}


#middleRightContentTwentyFive{
	width: 50%;
	float: left;
	box-sizing: border-box;
	padding: 0 12px 24px 0;
	clear: both;
}



#rightContentTwentyFive{
	width: 50%;
	float: left;
	box-sizing: border-box;
	padding: 0 0 24px 12px;
}




#projectInfo{
	position: absolute;
	margin-left: 48%;
    bottom: 20px;
    width: 350px; 
}

#leftContent{
	width: 100%;
	float: left;
	margin: 0 auto;
	clear: both;
	box-sizing: border-box;
	padding: 0 0 20px 0;
	background-color: white;
}

#rightContent{
	width: 100%;
	float: left;
	box-sizing: border-box;
	padding: 0 0 20px 0;
}

#rightContentEnd{
	width: 100%;
	float: left;
	box-sizing: border-box;
	padding: 0 0 124px 12px;
}

#leftContent h8{
	margin: 0 auto;
	text-align: center;
}

#leftContentSeventyFull{
	width: 100%;
	float: left;
	clear: both;
	box-sizing: border-box;
	padding: 0 0 24px 0;
	background-color: white;
}



#projectContent{
	max-width: 1450px;
	background-color: #FFF;
	margin: 0 auto;
	padding: 40px 140px 0 150px;
	clear: both;
	
}



}


@media only screen and (max-width: 767px) {
    /* Here, rules for anything less than Ipads width, with the
       advice to design for the smallest common width, 320px.
       This is the majority of smarthphones. */

/*body - i phones*/

h1{
	font-family: "sharpsansbold"; sans-serif;
	font-size: 1.15em;
	letter-spacing: .25em;
	line-height: 1em;
	text-align: center;
}

h2{
	text-align: center;
	margin: -6px 0 0 0;
}



h5{
	font-family: "sharpsansbold"; sans-serif;
	font-size: 1.1em;
	letter-spacing: .15em;
	line-height: 1.8em;
	margin: -2px 0 0 0;
	text-align: left;
	width: 240px;
}

h10{

	font-size: .8em;
	line-height: 1.5em;
	letter-spacing: .04em;
	color: #222222;
	clear: both;
	margin: 2px 0 0 0;
}

h14{
	font-family: "sharpsansbold"; sans-serif;
	font-size: 1.1em;
	line-height: 1.3em;
	letter-spacing: .15em;
	color: #222222;
	clear: both;
	margin: 2px 0 0 0;
}

#outline{
	height: 150%;
	width: 6px;
	position: fixed;
	margin: 0 6px 0 0;
}

#projectHeader{
	position: absolute;
	top: 45%;
    margin-top: -50px;
    left: 50%;
    clear: both;
}


.redDate{
	color: #FF6565;
	margin: 0 0 0 0;
}

.blueDate{
	color: #80dfff;
	margin: 0 0 0 0;
}

.greenDate{
	color: #39D244;
	margin: 0 0 0 0;
}

.yellowDate{
	color: #FEC52E;
	margin: 0 0 0 0;
}

.blackDate{
	color: #222222;
	margin: 0 0 0 0;
}


#emTag{
	margin: -10px 0 0 0;
	width: 30px;
	height: 4px;
}



#nav {
	float: right;
	text-align: left;
	margin: 8px 0 0 0;	
	width: 50px;	
}

#navRightDown{
	text-align: left;
	float: right;
	position: fixed;
	bottom: 16px;		
}

#navLeftDown{
	display:none;
}

#navRightDown{
	display:none;	
}



.blueHeader{
	width: 230px;
	height: 30px;
	margin-left: -115px;
	border: 4px solid #80dfff;
	padding: 11px 0 0 0;
	color: #80dfff;
}

.redHeader{
	width: 228px;
	height: 30px;
	margin-left: -114px;
	border: 4px solid #FF6565;
	padding: 11px 0 0 0;
	color: #FF6565;
}

.redHeaderLong{
	width: 200px;
	height: 30px;
	margin-left: -100px;
	border: 4px solid #FF6565;
	padding: 11px 0 0 0;
	color: #FF6565;
}

.redHeaderRed{
	width: 152px;
	height: 30px;
	margin-left: -76px;
	border: 4px solid #FF6565;
	padding: 11px 0 0 0;
	color: #FF6565;
}

.blueHeader{
	width: 244px;
	height: 30px;
	margin-left: -122px;
	border: 4px solid #80dfff;
	padding: 11px 0 0 0;
	color: #80dfff;
}

.greenHeader{
	width: 206px;
	height: 30px;
	margin-left: -103px;
	border: 4px solid #39D244;
	padding: 11px 0 0 0;
	color: #39D244;
}

.yellowHeader{
	width: 260px;
	height: 30px;
	margin-left: -130px;
	border: 4px solid #FEC52E;
	padding: 11px 0 0 0;
	color: #FEC52E;
}

.blackHeader{
	width: 132px;
	height: 30px;
	margin-left: -66px;
	border: 4px solid #222222;
	padding: 11px 0 0 0;
	color: #222222;
}

.blackHeaderSmall{
	width: 240px;
	height: 30px;
	margin-left: -120px;
	border: 4px solid #222222;
	padding: 11px 0 0 0;
	color: #222222;
}



#projectInfo{
	position: absolute;
	margin-left: 30px;
    bottom: 20px;
    max-width: 260px; 
}

#projectContent{
	max-width: 1450px;
	background-color: #FFF;
	margin: 0 auto;
	padding: 40px 20px 0 30px;
	clear: both;
	
}

#leftContent{
	width: 100%;
	float: left;
	margin: 0 auto;
	clear: both;
	box-sizing: border-box;
	padding: 0 0 20px 0;
	background-color: white;
}




#leftContentFifty{
	width: 100%;
	float: left;
	clear: both;
	box-sizing: border-box;
	padding: 0 0 24px 0;
	background-color: white;
}

#rightContentFifty{
	width: 100%;
	float: left;
	box-sizing: border-box;
	padding: 0 0 24px 0;
}





#leftContentSeventy{
	width: 100%;
	float: left;
	clear: both;
	box-sizing: border-box;
	padding: 0 0 24px 0;
	background-color: white;
}

#leftContentSeventyFull{
	width: 100%;
	float: left;
	clear: both;
	box-sizing: border-box;
	padding: 0 0 24px 0;
	background-color: white;
}

#rightContentThirty{
	width: 50%;
	box-sizing: border-box;
	padding: 0 0 24px 0px;
	margin: auto 0;
}




#rightContent{
	width: 100%;
	float: left;
	box-sizing: border-box;
	padding: 0 0 20px 0;
}

#rightContentEnd{
	width: 100%;
	float: left;
	box-sizing: border-box;
	padding: 0 0 124px 12px;
}

#leftContent h8{
	margin: 0 auto;
	text-align: center;
}



#leftContentThirtyThree{
	width: 50%;
	float: left;
	box-sizing: border-box;
	padding: 0 12px 24px 0;
	background-color: white;
}

#centerContentThirtyThree{
	width: 50%;
	float: left;
	box-sizing: border-box;
	padding: 0 0 24px 12px;
	background-color: white;
}

#rightContentThirtyThree{
	width: 50%;
	float: left;
	box-sizing: border-box;
	padding: 0 12px 24px 0;
	background-color: white;
}


#leftContentTwentyFive{
	width: 50%;
	float: left;
	box-sizing: border-box;
	padding: 0 12px 24px 0;
	clear: both;
}

#middleLeftContentTwentyFive{
	width: 50%;
	float: left;
	box-sizing: border-box;
	padding: 0 0 24px 12px;
}


#middleRightContentTwentyFive{
	width: 50%;
	float: left;
	box-sizing: border-box;
	padding: 0 12px 24px 0;
	clear: both;
}



#rightContentTwentyFive{
	width: 50%;
	float: left;
	box-sizing: border-box;
	padding: 0 0 24px 12px;
}



/*projectContentFrame*/

.fake-browser-ui {
	padding: 14px 0 0 0;
	border-radius: 3px;
	border-bottom: 3px solid #E5E5E5;
	background: #E5E5E5;
	display: inline-block;
	position: relative;
	line-height: 0;
	box-shadow: 1px 1px 8px #E5E5E5;
	width: 100%;
}

.fake-browser-ui .frame {
	display: block;
	height: 15px;
	position: absolute;
	top: 5px;
	left: 1px;	
	width: 100%;
}
 
.fake-browser-ui spanRed {
	height: 4px;
	width: 4px;
	border-radius: 4px;
	background-color: #F27475;
	border: 1px solid #e04353;
	float: left;
	margin: -1px 1px 0 8px;
}

.fake-browser-ui spanYellow {
	height: 4px;
	width: 4px;
	border-radius: 4px;
	background-color: #FCBA3E;
	border: 1px solid #E7A23A;
	float: left;
	margin: -1px 1px 0 4px;
}

.fake-browser-ui spanGreen {
	height: 4px;
	width: 4px;
	border-radius: 4px;
	background-color: #4EB64A;
	border: 1px solid #2DA737;
	float: left;
	margin: -1px 1px 0 4px;

}

.fake-browser-ui .whiteBox{
	display: none;
}

.fake-browser-ui .whiteBoxMobile{
	display: none;
}


#ProjectDetailsCopy{
	display: block;
	width: 100px;
	margin: 3px 0 0 0;
	float: left;
}

#ProjectDetailsCopyRight{
	display: block ;
	margin: -28px 0 0 0;
	float: right;
	clear: both;
	width: 200px;
}


#email{
	display: block;
	width: 100px;
	text-align: center;
	text-decoration: none;
}

#ProjectDetailsFooter{
	margin: 0 auto;
	bottom: 20px;
display: inline;
	
}

#blockOne{
	display: inline:
	width: 100px;
	float: left;
}

#blockTwo{
	display: inline:
	width: 100px;
	margin-left: -50px;
	margin: 0 auto;
}

#blockThree{
	display: block:
	width: 100px;
	float: right;
}

h6{
	font-family: "sharpsansmedium"; sans-serif;
	font-weight: 100;
	font-size: .7em;
	line-height: 1.5em;
	letter-spacing: .03em;
	color: #222222;
	clear: both;
}


}






@media only screen and (min-width: 480px) and (max-width: 767px) {
    /* This is for any screen less than Ipad's width and at least
       480px. This covers a many large-screened smartphones. It
       is declared after the above rule so it overrides the rules
       meant for 320px. */

/*body - big phones*/



#leftContentTwentyFive{
	width: 25%;
	float: left;
	clear: none;
	box-sizing: border-box;
	padding: 0 19px 24px 0;
	background-color: white;
}

#middleLeftContentTwentyFive{
	width: 25%;
	float: left;
	box-sizing: border-box;
	padding: 0 13px 24px 6px;
	background-color: white;
	clear: none;
}


#middleRightContentTwentyFive{
	width: 25%;
	float: left;
	box-sizing: border-box;
	padding: 0 6px 24px 13px;
	background-color: white;
	clear: none;
}



#rightContentTwentyFive{
	width: 25%;
	float: left;
	box-sizing: border-box;
	padding: 0 0 24px 19px;
	background-color: white;
	clear: none;
}






#outline{
	height: 150%;
	width: 8px;
	position: fixed;
	margin: 0 4px 0 0;
}

#projectContent{
	max-width: 1450px;
	background-color: #FFF;
	margin: 0 auto;
	padding: 40px 55px 0 65px;
	clear: both;
	
}


#projectInfo{
	position: absolute;
	margin-left: 65px;
    bottom: 20px;
    width: 350px; 
}

#emTag{
	margin: -10px 0 0 0;
	width: 30px;
	height: 4px;
}

#leftContent{
	width: 100%;
	float: left;
	margin: 0 auto;
	clear: both;
	box-sizing: border-box;
	padding: 0 0 20px 0;
	background-color: white;
}

#rightContent{
	width: 100%;
	float: left;
	box-sizing: border-box;
	padding: 0 0 20px 0;
}

#leftContent h8{
	margin: 0 auto;
	text-align: center;
}



#leftContentThirtyThree{
	width: 33%;
	float: left;
	box-sizing: border-box;
	padding: 0 17px 24px 0;
	background-color: white;
}

#centerContentThirtyThree{
	width: 33%;
	float: left;
	box-sizing: border-box;
	padding: 0 9px 24px 8px;
	background-color: white;
}

#rightContentThirtyThree{
	width: 33%;
	float: left;
	box-sizing: border-box;
	padding: 0 0 24px 17px;
	background-color: white;
}

#blockOne{
	display: inline:
	width: 100px;
	float: left;
	margin: 0 0 0 -35px;
}



#blockThree{
	display: block:
	width: 100px;
	float: right;
	margin: 0 -33px 0 0;
}

#leftContentSeventyFull{
	width: 100%;
	float: left;
	clear: both;
	box-sizing: border-box;
	padding: 0 0 24px 0;
	background-color: white;
}



}