/*------------------------------------*\
    RESET
\*------------------------------------*/


*,
*:after,
*:before {
	margin:0;
	padding:0;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}

/*RESET*/



.list ol, ul{list-style:none;} 

blockquote, q{quotes:none;} 

blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} :focus{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} 

table{border-collapse:collapse; border-spacing:0;}

body {
	font-size: 1.05em;
	line-height: 1.25em;
	font-family: Helvetica, Arial, san-serif;
	word-wrap: break-word;
	background: #fff;
	color: #555;
}


html,
	body {
		margin:0;
		padding:0;
		height:100%;
	}
	
	
a:link { color:#581e7f; text-decoration:none; }
a:visited { color:#581e7f; text-decoration:none; }
a:active { color:#581e7f; text-decoration:none; }
a:hover { color:#5d8111; text-decoration:none;}

h3,  b {color:#5c5864; }

	#container {
		
		min-height:100%;
		position:relative;
	}

	#contentbody {
	
		padding:10px;
		padding-bottom:110px;	/* Height of the footer */
	}
	
	#contentbodysub {
		padding:10px;
		padding-bottom:110px;	/* Height of the footer */
		background-color:#ffffff;
	}
	
/*	#footer {
		position:absolute;
		bottom:0;
		width:100%;
		height:110px;*/			/* Height of the footer */
/*		background-image:  url(images/footbg.png);
	}
	*/
.lowdown  { background-color:#b6adc3; color:#90869f; }
.photocap  { font-size:11px; }	

#containerfoot { background-color:#eae8f8; width:100%; min-height:100px;  }
#containerfoot2 { background-color:#eae8f8; width:100%;  }

#left {    float: left;	width:60%;   min-height: 100px; }

#right {    float: left;  	width:35%; padding-left:5%; color:#625e66; font-size:14px;    min-height: 100px; }

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

	
p { margin-bottom:11px; }	

header {
	padding:0px;
	/* background: #817e86; */
	background-image:   url(../images/ghostheader.png);
	width: 100%;
	height: 110px;
	position: relative;
	top: 0px;
	left: 0;
	border-bottom: 0px solid #ebedca;
	z-index: 100;
}

img {
	/* width: 100%; */
}

.borderradius { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;}

a img {
	text-decoration: none;
	border: 0 none;
	}



/* responsive image */
.hundred img {
	max-width: 100%;
	height: auto;
}

@media \0screen {
  .hundred img { 
  	width: auto; /* for ie 8 */
  }
}

.floatlf {float:left;}

/*@font-face { src: 
	local('Lovely-Font'),
	url('fonts/lovely_font.otf') 
	format('opentype');
	} */
	
/*@font-face {
 font-family: allerfont;
 src: url("fonts/Aller.eot") 
}
@font-face {
 font-family: allerfont;
 src: url("fonts/Aller.ttf") 
} 
*/


/*------------------------------------*\
    STRUCTURE
\*------------------------------------*/

.wrapper {
	max-width:1280px;
	margin:0 auto;
}


.thousand { 
	max-width:1280px; 
	width: 96%;	
	margin: 0 auto;
	padding: 0%;
	clear:both;}
	
	#main {
		width: 50%;
		min-width:320px;
		margin-right: 5%;
		margin-bottom:30px;
		float: left;
		}
		
	#mainabout {
		width: 30%;
		min-width:320px;
		margin-right: 5%;
		margin-bottom:30px;
		float: left;
		}

	#mainPORCOM {
		width: 50%;
		min-width:560px;
		margin-right: 5%;
		margin-bottom:30px;
		float: left;
		}
		

	
	ul.text {
	font-style: normal;
	line-height: 1.5em;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #333333;
	text-decoration: none;
	text-indent: 5px;
	list-style-position: outside;
	list-style-type: square;
	padding: 0px;
	margin: 0px 0px 12px 25px;
	}	
	

	#mainportfolio {
		width: 100%;
		min-width:320px;
		margin-right: 0;
		margin-bottom:30px;
		}	
		
	

		.mainportfoliobox {
			
			width:19%;
			margin-right: 5px;
			margin-bottom:30px;
			Float:left;
			background-color:#eeeeee;
			}
			
		.mainportfolioheader { clear:both; }
		
		.fade {
	   opacity: 1;
	   transition: opacity .25s ease-in-out;
	   -moz-transition: opacity .25s ease-in-out;
	   -webkit-transition: opacity .25s ease-in-out;
	   }

	   .fade:hover {
      opacity: 0.6;
      }

	#aboutbox { background-image:   url(../images/ghost.png); min-height:300px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; padding:25px; margin-bottom:25px; }	  
	  
	#portfoliobox {
		width: 100%;
		min-width:320px;
		background-image:   url(../images/ghost.png);
		margin-bottom:30px;
		}
		
		#portfolioboxinside {
		margin: 0 auto;
		}
		
	aside {
		width: 45%;
		min-width:220px;
		margin-bottom:30px;
		float: left;
		font-size:.85em;
		}
		
	#asideabout {
		width: 65%;
		min-width:220px;
		margin-bottom:30px;
		float: left;
		font-size:.85em;
		}

		
.logo {
	float:left; padding-top:45px;
}

.logofoot {
	float:left; padding-top:0px;
}

.realspace { width:15%; float:left; }

#subcontent1 { float:left;  margin-top:150px; background-color:#ff99ff; width:20%; min-width:10%; }

#subcontent2 { float:left; margin-top:150px; background-color:#99ffff; width:65%; }


/*------------------------------------*\
    Responsive Navigation
\*------------------------------------*/



ul,
ol {
	list-style:none;
}

/* Below hides the nav menu when the page load - otherwise it briefly shows up - other .sf-menu element are held in the navmenu > superfish3.css file not here */
.sf-menu  li ul {
  display:none;
}

.wrapper {
	max-width:1280px;
	width:95%;
	margin:0 auto;
	position:relative;
}
.main {
	width:100%;
	min-width:300px;
	margin:50px 0;
	text-align:center;
}
.content {
	text-align:left;
	margin:25px 0;
}
.content-text {
	margin:0 0 15px;
}



/* Navigation styling - also held in navmenu/superfish.css file */

.navbox {
	float:right;
	margin-top:69px;
	margin-right:0;
	list-style:none;
}
.nav {
	position:relative;
	display:inline-block;
	font-size:16px;
	font-weight:normal;
}
.nav-list {
position:absolute; top:90px; left:-160px; z-index:202; }
	
}
.nav-item {
	float:left;
	*display:inline;
	font-size:12px;
	zoom:1;
	font-family: allerfont, sans-serif;
	letter-spacing:2px;
}
.nav-item a {
	display:block;
	padding:15px 15px;
	color:#ebedca;
	background:#817e86;
}

.nav-item:first-child a {
	border-radius:0;
}
.nav-item:last-child a {
	border-radius:0;
}
.nav-item a:hover {
	color:#4f305c;
	background:#ebedca;
}
/* Mobile Navigation */
.nav-mobile {
	float:right;
	display:none; /* Hide from browsers that don't support media queries */
	cursor:pointer;
	position:absolute;
	top:50px;
	right:0;
	background:#4f305c url(../images/icon_mobilelines.gif) no-repeat center center;
	height:40px;
	width:60px;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
}

.eyemobile { display:none; }


#banner { display:none; }
#bannerport { display:none; }

/*------------------------------------*\
    Media Queries
\*------------------------------------*/

@media only screen and (min-width: 1px) and (max-width: 650px) 
{
	#left {    	width:95%; padding-right:5%;   min-height: 100px; }

	#right {     width:95%; padding-right:5%; color:#625e66; font-size:14px;    min-height: 100px; }
	
			.mainportfoliobox {
			
			min-width:250px;
			margin-right: 5px;
			margin-bottom:30px;
			Float:left;
			background-color:#eeeeee;
			}
}




@media only screen and (min-width: 900px) and (max-width: 1024px) {

#banner { clear:both; display:block; background-size: cover; width:100% ; height:140px; }
#bannerport { clear:both; display:block; background-size: cover; width:100% ; height:50px; }

.realspace { width:5%; float:left; }

.navbox {
	margin-right:0; }

.eyemobile { display:none; }
}



@media only screen and (min-width: 1px) and (max-width: 899px) 
{


	#banner { display:block; background-image: url('images/span2.jpg') ; background-size: cover; width:100% ; height:234px; } /* This sets the background image on mobile for top of page */
	#bannerport { display:block; background-size: cover; width:100% ; height:50px; } /* This sets the background image on mobile for top of page */

	.eyefull { display:none; }
	.eyemobile { display:block; }
	
	.realspace { display:none; }
	
	

	#main {
		display:block;
		position:relative;
		width:95%;
		min-width:290px;
		padding-right:30px;
		margin-bottom:5px;
		}
		
	aside {
		display:block;
		position:relative;
		width:95%;
		min-width:290px;
		padding-right:30px;
		margin-bottom:30px;
		
		}
		
	#asideabout { width:100%; }
		
	.navbox {
	margin-right:2%;margin-top:4px;}
	
	.nav-mobile {
		display:block;
	}
	.nav {
		width:100%;
		padding:40px 0 0;
	}
	.nav-list {
		display:none;
	}
	.nav-item {
		width:160px;
		float:none;
		font-size:18px;
	}
	.nav-item a {
		background:#4f305c;
		padding:10px 20px;
	}
	.nav-item:first-child a {
		border-radius:5px 0 0;
	}
	.nav-item:last-child a {
		border-radius:0 0 5px 5px;
	}
	.nav-active {
		display:block;
	}
	.nav-mobile-open {
		border-radius:5px 5px 0 0;
		-webkit-border-radius:5px 5px 0 0;
		-moz-border-radius:5px 5px 0 0;
	}
	
/*	#footer2 { height:500px; }
}*/